Cómo crear una hermosa página de tienda de WooCommerce (en 5 pasos)

¿Busca la forma más fácil de personalizar la página de la tienda de WooCommerce?

WordPress ofrece una amplia variedad de bloques para ayudarte a crear sitios web profesionales. Si usa WooCommerce, también obtiene acceso a bloques de WooCommerce dedicados que puede usar para su tienda en línea.

Por lo tanto, es posible que se pregunte cómo usar estos elementos para crear una página de tienda de WooCommerce que genere conversiones.

Afortunadamente, el proceso es muy simple. Usando estos bloques, WooCommerce te permite mostrar tus productos de diferentes maneras. Además, puede agregar filtros y funciones de búsqueda para que a los usuarios les resulte más fácil navegar por su tienda.

En este artículo, le mostraremos cómo crear una hermosa página de tienda de WooCommerce usando bloques . Puede seguir nuestras pautas y elegir qué bloques desea usar, según sus necesidades. ¡Empecemos!

Tabla de contenido:

1. Coloque el bloque Todos los productos
2. Agregar bloques de productos destacados y/o productos cuidadosamente seleccionados
3. Habilitar la búsqueda de productos en la página de la tienda
4. Utilice los bloques de categorías destacadas
5. Agrega una opción para filtrar productos por precio

Cómo personalizar la página de la tienda de WooCommerce con bloques

Para comenzar, querrá abrir el editor de la página de la tienda de su tienda. Luego, sigue estas instrucciones para personalizar su contenido.

1. Coloque el bloque Todos los productos

Las páginas de la tienda vienen en todas las formas y tamaños. En una tienda en línea, esta página generalmente muestra todos los productos que tiene a la venta. Los usuarios pueden hacer clic en artículos individuales para abrir sus respectivas páginas de productos o agregarlos directamente a sus carritos (si la tienda lo permite):

Con WordPress y WooCommerce, tienes control total sobre qué elementos incluir en la página de tu tienda. La apariencia de esta página dependerá del tema que esté usando y de cómo lo configure.

WooCommerce configura automáticamente una página de tienda cuando comienza a usar el complemento, para que pueda seguir adelante y ver cómo se ve la suya. Cuando esté listo para editarlo, vaya a Páginas y busque la opción Comprar .

Abra esta página en el Editor de bloques y debería ver algo como esto:

De forma predeterminada, la página de la tienda incluye el bloque Todos los productos y un encabezado. Si no ve este bloque, puede agregarlo a la página haciendo clic en el signo más (+) y seleccionándolo de la lista de opciones:

El bloque Todos los productos muestra una cuadrícula que contiene todos los productos de su tienda, ordenados de nuevo a antiguo. Para cambiar el orden de visualización de sus productos, haga clic en el bloque y vaya al panel de configuración a la derecha. Luego, navegue a la sección Configuración de contenido y seleccione su preferencia en el menú Ordenar productos por :

Mientras tanto, en Configuración de diseño , puede elegir la cantidad de columnas y filas que desea mostrar en la cuadrícula del producto. Siéntase libre de explorar las otras opciones disponibles con este bloque.

2. Agregar bloques de productos destacados y/o productos cuidadosamente seleccionados

Muchas páginas de tiendas destacan productos específicos. Por lo general, estos son artículos sobre los que los propietarios de tiendas quieren llamar la atención, como existencias nuevas o con descuento o productos agregados recientemente. WooCommerce viene con un bloque de Producto destacado que te permite exhibir cualquier artículo en tu tienda.

Una vez que coloque este bloque en su página, deberá seleccionar el producto que desea destacar y hacer clic en Listo :

Luego, WooCommerce mostrará la imagen, el nombre, el precio, la descripción y una llamada a la acción (CTA) del producto. El bloque debería verse así:

A continuación, puede personalizar este bloque a su gusto. Por ejemplo, puede cambiar la imagen y modificar el botón CTA.

La desventaja de agregar el bloque Producto destacado a la página de su tienda de WooCommerce es que puede distraer a los usuarios del resto de sus productos. Para contrarrestar esto, sugerimos usar columnas para mostrar varios productos destacados uno al lado del otro:

Una alternativa al bloque de Productos Destacados es la opción de Productos Seleccionados a Mano . Este bloque le permite elegir varios productos y mostrarlos uno al lado del otro. Utiliza el mismo estilo que el bloque Todos los productos :

Tanto los bloques de Productos Destacados como los de Productos Seleccionados a Mano cumplen propósitos similares. Idealmente, elegirá una de las dos opciones para no abrumar a los visitantes con demasiados elementos destacados. También recomendamos colocar estos bloques en la parte superior de la página, para que los usuarios no se los pierdan.

3. Habilite la búsqueda de productos en la página de la tienda

Si tiene una tienda con un gran catálogo de productos, deberá ofrecer una función de búsqueda. De esta forma, los usuarios pueden buscar cualquier artículo específico que tengan en mente, sin tener que navegar por toda la tienda.

Al agregar un bloque de búsqueda a la página de su tienda, querrá buscar la opción de búsqueda de productos , no el bloque de búsqueda predeterminado de WordPress. La búsqueda de productos limitará los resultados a los productos de WooCommerce, mientras que el otro bloque de búsqueda incluirá todas las demás páginas de su sitio.

Así es como se ve la función de búsqueda de WooCommerce:

Tenga en cuenta que el bloque de búsqueda de productos no funciona dentro del editor, por lo que deberá probarlo en la interfaz. Además, el bloque no ofrece la funcionalidad de autocompletar, por lo que los usuarios deberán escribir una consulta completa y cargar una nueva página para ver los resultados.

4. Utilice los bloques de categorías destacadas

Además de señalar a los usuarios productos cuidadosamente seleccionados, es posible que también desee resaltar categorías de productos específicas. Esto puede ser particularmente útil si vende varios tipos de productos, ya que permitirá a los usuarios buscar artículos en un departamento específico.

Comience agregando el bloque Categoría destacada a su página de tienda de WooCommerce. Luego, seleccione la categoría de producto que desea resaltar y haga clic en Listo :

Así es como se verá el bloque de Categoría destacada :

El bloque te permite cambiar el color del fondo y el texto, pero no ofrece muchas opciones de personalización adicionales. Además, dado que el bloque ocupa mucho espacio, recomendamos colocar varias categorías destacadas una al lado de la otra mediante columnas:

Dado que el bloque de Categoría de producto destacado es muy básico, le recomendamos que busque complementos como Otter Blocks para una mayor personalización.

Con Otter Blocks, puede modificar los bloques de WooCommerce agregando animaciones y otras configuraciones de visibilidad:

Además, Otter Blocks agrega una variedad de bloques nuevos que puede usar en su tienda en línea. Estos incluyen opciones como ventanas emergentes (que son perfectas para recopilar registros de correo electrónico) y reseñas de productos.

5. Agrega una opción para filtrar productos por precio

Hasta ahora, su tienda tiene una barra de búsqueda, productos cuidadosamente seleccionados, categorías destacadas y todo su catálogo de productos. Todo lo que te falta es una forma para que los usuarios filtren productos.

El bloque Filtrar productos por precio permite a los clientes hacer precisamente eso. El bloque muestra un control deslizante que permite a los clientes establecer los precios mínimo y máximo para los productos que desean ver:

Los valores de los precios no se pueden editar, dependen de los precios de sus productos. Los visitantes pueden escribir los valores que deseen o usar el control deslizante para modificarlos.

Cuando realice cambios en el control deslizante de precios, el bloque Todos los productos se actualizará para mostrar los productos que cumplen con los criterios. Esto sucede sin que los usuarios necesiten volver a cargar la página.

En cuanto a la ubicación, le recomendamos que agregue el bloque Filtrar productos por precio arriba de su catálogo de productos. De esa manera, los usuarios lo verán a medida que se desplazan hacia abajo en la página.

También puede permitir que los usuarios filtren productos por tamaño, color y otras características. El bloque Filtrar productos por atributo le permite navegar a través de productos que cumplen con un atributo elegido, según las opciones disponibles en su tienda.

¡Y eso es todo! Cuando haya terminado, asegúrese de guardar los cambios y su nueva página de la tienda comenzará a funcionar de inmediato.

Configure su página de tienda de WooCommerce hoy

Su objetivo final es crear una página que maximice las conversiones ofreciendo a los usuarios todas las opciones que buscan en un diseño y un orden que tenga sentido.

Una vez que configure su página de tienda de WooCommerce, puede centrar su atención en las páginas de sus productos individuales. Con ese fin, asegúrese de consultar nuestra guía sobre cómo optimizar la página del producto WooCommerce.

¿Tiene alguna pregunta sobre cómo crear una página de tienda de WooCommerce usando bloques? ¡Háganos saber en la sección de comentarios!