columnasde4woocategory

WooCommerce con Gutenberg

A partir de la versión 5.0 de WordPress se introduce una nueva forma de editar posts y páginas llamada Guntenberg, ahora el contenido se creará por medio de bloques.

En este post me limitaré a hablar solo de los Bloques de Guntenberg para WooCommerce ya que no existe mucha información sobre qué es y como funciona.

A continuación te comparto un vídeo y un curso para que conozcas más sobre este nuevo editor:

Vídeo de Francisco Aguliera

Curso sobre Gutemberg de Juan Pablo De la torre

Para WooCommerce se agregaron bloques, los cuáles vienen a sustituir a los Shortcodes o mas específicamente al Shortcode
.Por ejemplo, antes para colocar en una página con 8 productos destacados en columnas de 4 teníamos que poner algo así;

y eso nos daba un resultado como este:

Ahora podemos hacer lo mismo pero con bloques de una manera más fácil y rápida, igual te genera un Shortcode pero insertado de una manera más visual.

ACTIVANDO LOS BLOQUES DE GUTENBERG PARA WOOCOMMERCE

Si ya actualizaste tu sitio a la versión 5.0 de WordPress y tienes instalado WooCommerce te saldrá un mensaje como este :

En caso de que no llegarás a ver el mensaje dirígete a plugins y busca “WooCommerce Blocks

Instalamos el plugin y ahora vamos a una página o post, damos click en el símbolo de + y a continuación veremos una nueva área de bloques llamada WooCommerce :

Al darle click se desplegará una pestaña con los diferentes bloques para agregar a nuestra página :

Productos destacados: Con este bloque agregaremos los productos destacados de nuestra tienda :

Cuando escogemos el producto destacado a mostrar veremos algunas opciones de lado derecho donde podremos modificar:

Contenido : Podremos mostrar u ocultar la descripción de producto y lo mismo con el precio.

Superposición : Es una capa de color que va encima de la imagen con cierta opacidad en este caso el color es gris y la opacidad es de 50.

También podremos cambiar el Texto, centrar, cambar en link y color del botón:

Guardamos y al final tendremos algo similar a este ejemplo:

Productos elegidos manualmente:
Con este bloque podremos agregar los productos manualmente uno por uno.

De lado derecho podremos escoger las columnas, ordenar por novedad, precio, valoración, rebajados etc..

Productos mas vendidos: Con un solo click agregaremos los productos mas vendidos de nuestra tienda.

Productos por categoría : Con este bloque podremos agregar las categorías de productos .

Productos Recientes: Con este bloque vamos agregar los productos mas recientes de nuestro sitio.

Productos Rebajados : Con este bloque vamos agregar los productos que tienen descuento.

Productos mas valorados : Este bloque es para que coloquemos los productos con mejor calificación o con mas estrellas .

Products by Attribute : Con este bloque agregaremos productos con atributos por ejemplo color, talla.

Colocaré un ejemplo; vamos agregar el bloque productos de categoría y le vamos a asignar 4 columnas, 3 filas y en orden de producto dejaremos newness-newss first :

Guardamos nuestra página y este sería el resultado:

Como comente, podemos agregar bloques de productos en posts o en páginas.

Por el momento tenemos que descargar un plugin para agregar los bloques, sin embargo, más adelante ya vendrán incluidos y se esta trabajando para agregar más bloques.

Este es un prototipo de diseño de como podría verse la edición de producto en el futuro:

Por lo que leí en la página de Woo, en siguientes actualizaciones se introducirá el concepto de plantillas, la complementación específica de cómo funcionarán aún está en proceso pero esto permitirá a WooCommerce modernizar y mejorar aún más la experiencia de edición de productos.

También te recomiendo :

¿Como Agregar el MXN después del precio?

comparte este post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email