Una guía para usar bloques de Gutenberg para su tienda WooCommerce

La introducción del editor Gutenberg en WordPress ha contribuido en gran medida a remodelar la identidad de WordPress. De ser un sistema central de administración de contenido con características para agregar medios y, opcionalmente, complementos para diversas necesidades, ahora es además un editor WYSIWYG centrado en medios y un creador de páginas web enriquecido, sin comprometer la flexibilidad que siempre ofreció. De hecho, los bloques que proporciona Gutenberg aumentan la flexibilidad para crear páginas de la manera que desee.

La mejor ventaja que ofrece Gutenberg sobre el editor anterior (también llamado editor TinyMCE) es que elimina la necesidad de saber codificar o la necesidad de comprender la estructura de WordPress para saber cómo agregar más funcionalidad a su sitio web de WordPress o WooCommerce. Tienda. Sin embargo, si se siente más cómodo con el antiguo editor de WordPress, siempre puede instalar este complemento gratuito conocido como Editor clásico por los colaboradores de WordPress, que le brinda la opción de deshabilitar Gutenberg por completo, o alternar entre el antiguo editor y Gutenberg. . ¡Gutenberg también ofrece un bloque de editor clásico para que los usuarios utilicen las funcionalidades del editor clásico dentro de Gutenberg! Suena demasiado bueno para ser verdad? ¡Vamos a sumergirnos en esta publicación o más bien en una guía para usar los bloques de Gutenberg para su tienda WooCommerce!

Se puede acceder a los bloques de Gutenberg a través de cualquier página de WordPress. Cuando agrega una nueva página o edita una página existente dentro de WordPress, puede ver un símbolo "+" mientras pasa el mouse sobre el área de contenido superior izquierda de la pantalla.

Hay diferentes tipos de bloques que proporciona Gutenberg para diferentes usos:

Si bien los bloques se pueden usar para crear una variedad de páginas, como administrador de WooCommerce o gerente de tienda, querrá centrarse más en la página de Inicio o Tienda. Por lo tanto, para el propósito de este tutorial, ¡creemos una página de inicio para su tienda que esté diseñada para aumentar sus ventas! Usaremos los bloques de WooCommerce al máximo para esto. Estos bloques eran parte anterior de un complemento de funciones de Automattic y se fusionaron en la versión 3.5 de WooCommerce.

Los bloques de WooCommerce contienen diferentes características o 'bloques' principalmente relacionados con la visualización de productos en su página, que puede usar para construir su tienda. La siguiente es la lista de bloques disponibles en los bloques de WooCommerce:

• Productos por categoría
• Productos más nuevos
• Producto destacado
• Productos más vendidos
• Productos en oferta
• Productos seleccionados a mano
• Productos mejor calificados
• Productos por Atributo

Comencemos agregando un producto destacado en la parte superior de nuestra página de inicio. Puede ser cualquier producto que desee destacar para sus usuarios/audiencia.

Hemos agregado un producto conocido como "Membresía de tienda". Tan pronto como se agrega un producto, se muestra su imagen, descripción y precio. Puede elegir ocultarlos usando las opciones en la barra lateral derecha. También se agrega un botón "Comprar ahora"; el color, el texto y la URL a la que apunta son todos atributos editables.

El color de superposición es una característica interesante que le permite establecer el color y la opacidad de la imagen del producto que ha elegido como producto destacado en este caso:

También puede agregar una clase CSS a esta imagen. Del mismo modo, el botón Comprar ahora también se puede editar:

A continuación, agreguemos algunos recién llegados y los más vendidos de la tienda, para que tanto los visitantes nuevos como los que regresan tengan algo que sacar de esta página.

Para esto, primero agregaremos un bloque conocido como Encabezado que se encuentra en Bloques comunes:

Una vez que se agrega un encabezado apropiado, como "Nuevas llegadas", podemos continuar y agregar el bloque respectivo para el mismo. Para ambos propósitos, utilizaremos bloques de WooCommerce conocidos como Productos más vendidos y Productos más nuevos . Estos bloques se pueden encontrar nuevamente en los bloques de WooCommerce. Agreguemos el bloque Productos más nuevos .

Puede ver que el bloque Productos más nuevos extrae los productos agregados más recientemente de su tienda WooCommerce. Puede elegir mostrar tantos productos como desee para este bloque configurando el número de filas y columnas para mostrar, así como filtrar los productos por categoría usando las opciones en la barra lateral derecha:

De esta manera, hemos agregado otra fila después de la fila Producto destacado para los recién llegados:

A continuación, agreguemos los productos más vendidos de manera similar (después de agregar el bloque de encabezado):

Ahora que hemos creado estas filas para visitantes nuevos y recurrentes, agreguemos también una fila que muestre los productos que están en oferta para atraer más ventas. Haremos esto usando el bloque A la venta en WooCommerce Blocks nuevamente (después de usar el bloque Encabezado para agregar un encabezado):

Hay muchos más bloques que puede agregar en los bloques de WooCommerce según sus requisitos. Ahora agreguemos todos los productos a la página de la Tienda. Para ello, puede elegir el bloque Productos por categoría .

Muchas veces, también encontrará todos estos bloques en la categoría de bloques Más utilizados , pero para el propósito de este tutorial, seleccionamos esos bloques de la categoría en la que han sido asignados. Puede vincular todos los encabezados a sus respectivas páginas, como la página de ofertas, la página de los más vendidos, etc. para que los clientes vean la lista completa de productos en esa sección.

En nuestra página Tienda/Inicio, podemos agregar un botón que diga Explorar tienda, que enlazará con la página Tienda.

Para agregar un botón, tenemos que elegir entre el bloque Elementos de diseño.

Vincularemos este botón a la página de la Tienda.

Del mismo modo, puede crear botones debajo de todos los demás bloques que creamos, como el bloque "Más vendidos", el bloque "En oferta", etc. y crear páginas separadas para todos estos, y vincular los botones a sus respectivas páginas.

Para crear páginas separadas para tipos de productos separados (superventas o productos en oferta), puede utilizar códigos abreviados que mostrarán este tipo específico de productos en las páginas respectivas. En esta publicación, hemos hablado sobre cómo puede mostrar diferentes categorías de productos en la página de inicio (o en cualquier página) utilizando varios códigos abreviados.

Así es como se ve nuestra página al final:

Ahora, simplemente haga clic en Personalizar (en el front-end, al obtener una vista previa de su página) para convertirla en su página principal y ¡listo! Así de fácil es crear portadas atractivas para tu tienda WooCommerce usando Gutenberg. ¡Explore y experimente con los diversos bloques que Gutenberg tiene para ofrecer para utilizar sus funciones al máximo!