Una descripción general del nuevo complemento de bloques de WooCommerce

Cuando instala o actualiza WooCommerce, incluye un nuevo complemento llamado WooCommerce Blocks. Esto agrega nuevos bloques al editor de bloques de WordPress que le permiten agregar productos WooCommerce a sus páginas y publicaciones. En este artículo, echaremos un vistazo a los bloques de WooCommerce y veremos qué pueden hacer.

Complemento de bloques de WooCommerce

WooCommerce Blocks es un nuevo complemento para WooCommerce que agrega 7 bloques a Gutenberg:

1. Producto destacado
2. Productos seleccionados a mano
3. Productos más vendidos
4. Productos mejor valorados
5. Nuevos productos
6. Productos en oferta
7. Productos por categoria

Cada uno de los bloques se muestra dentro de una cuadrícula ajustable y se pueden ordenar o filtrar. Las cuadrículas le permiten especificar el número de columnas en el diseño. Puede elegir entre 1 y 6 columnas ajustando un control deslizante. Varios de los bloques también le permiten ajustar el número de filas. 4 es el valor predeterminado para todos los bloques con columnas o filas. No incluye paginación, por lo que el número que establezca es todo lo que se mostrará.

Los filtros le permiten elegir las categorías. Algunos incluyen una función de clasificación, que le permite ordenar por novedad, precio, calificación, ventas, título o orden del menú.

Los bloques también incluyen la pestaña avanzada estándar de Gutenberg con campos CSS personalizados.

Activar el bloque de productos

Cuando actualice o active WooCommerce, verá el nuevo complemento en su lista de complementos. Si no lo ve aquí, puede buscar Bloques de WooCommerce en la pestaña Agregar nuevo en Complementos.

Puede activar el bloque en la lista de complementos o haciendo clic en el botón en la parte superior del panel de WordPress.

Usando los bloques de WooCommerce

La nueva pestaña llamada WooCommerce se agrega a la lista de bloques disponibles dentro del editor de Gutenberg. Dentro de esta pestaña se encuentra el conjunto de 7 bloques de WooCommerce. Cada uno de los bloques tiene un icono que coincide con lo que hacen para que puedas reconocerlos de un vistazo.

A medida que agrega los bloques a la página, los símbolos aparecen en la página donde puede hacer clic para agregarlos rápidamente.

Veamos cada bloque.

Producto destacado

Producto destacado le permite elegir un solo producto de la lista para mostrar. Puede alinear el texto, editar la superposición y editar la imagen. También tiene el campo Clase CSS adicional.

Este bloque tiene la mayor cantidad de personalizaciones disponibles de todos los bloques de WooCommerce. Establezca la orientación del texto con los botones de texto en la parte superior. Al hacer clic en Editar, se abren las personalizaciones para la superposición. Aquí, puede elegir el producto, mostrar la descripción, mostrar el precio, elegir el color de la superposición y establecer su opacidad.

Puede elegir un color para usar o puede elegir un color personalizado haciendo clic en el círculo multicolor. Aquí, puede ingresar el código hexadecimal, el código RGB o ajustar el color con el control deslizante y el selector de color. Me gustan los ajustes de superposición. Para ajustar el texto o el botón, necesitará usar CSS.

Productos seleccionados a mano

Productos seleccionados a mano le permite seleccionar los productos que se mostrarán. Puede buscarlos desde el propio bloque o desde la columna de la derecha. Establezca el número de columnas de 1 a 6. Ordene por novedad, precio, calificación, ventas, título o orden de menú.

La selección de los productos los agrega al diseño dentro de la cuadrícula.

Productos más vendidos

Los productos más vendidos no le permiten elegir nada del bloque, pero aún puede realizar todas sus personalizaciones en la configuración de la derecha. Aquí, puede seleccionar el número de columnas y filas (elija de 1 a 6 para cada una), filtrar por categoría y ajustar CSS.

En este ejemplo, elegí 6 columnas, 2 filas y la categoría Ropa.

Productos mejor valorados

Productos mejor valorados también añade los productos a medida que selecciona el bloque. La configuración permite incluir el diseño estándar para 1-6 columnas y filas, filtrar por categoría y CSS. Éste muestra la configuración predeterminada.

Nuevos productos

Newest Products también agrega automáticamente los productos a medida que selecciona el bloque. La configuración incluye el diseño estándar, el filtro de categoría y CSS. En este ejemplo, elegí 5 columnas y 3 filas. Dejé el filtro de categorías por defecto, que incluye todas las categorías.

Productos en oferta

Productos en oferta carga automáticamente todos los productos que están en oferta. También incluye las opciones de diseño para columnas y filas, el filtro de producto y CSS. Este agrega una opción Ordenar por para que pueda ordenar por novedad, precio, calificación, ventas, título o orden de menú. En este ejemplo, puse las columnas en 2 y las filas en 4. Dejé la categoría de producto en el valor predeterminado.

Productos por categoria

Productos por categoría le permite elegir las categorías dentro del bloque e incluye un selector para ayudar a refinar las opciones. Para mi ejemplo, solo tenía una opción (Cualquier categoría seleccionada). También incluye las opciones de diseño, la selección de categorías, el orden por y la configuración de CSS.

En este ejemplo, seleccioné mis categorías, establecí las columnas en 4, las filas en 2 y ordené los productos alfabéticamente.

Páginas de ejemplo con bloques de WooCommerce

Aquí hay un vistazo a cada bloque en el front-end. Agregué una etiqueta para identificarlos. He configurado cada una en un número diferente de columnas, pero todas tienen 1 fila para ayudar a evitar que la imagen se salga de control. Puede crear fácilmente una página de tienda para cada categoría utilizando estos bloques.

Por ejemplo, he creado una página solo para mostrar accesorios. Agregué una imagen de portada y un título, y configuré el bloque Productos por categoría para mostrar 3 columnas y 6 filas.

Crea una página limpia con un bonito diseño y, por supuesto, solo muestra los productos de la categoría de accesorios. Esto se puede utilizar para crear todo tipo de páginas de productos.

Aquí hay una pequeña llamada a la acción que agrega un bloque seleccionado a mano y un bloque de texto en una columna doble.

La página es simple, pero funcional.

Para esta página, agregué los Productos más vendidos dentro de un diseño de publicación de blog. Lo configuré en 4 columnas y 1 fila y seleccioné Ropa como categoría.

La publicación se ve muy bien. Antes de publicar, probablemente agregaría algo de espacio, una etiqueta para los productos y tal vez agregaría algo de relleno al texto, pero es fácil ver el potencial.

Para este, agregué un diseño de dos columnas y agregué un bloque de texto y el bloque de Productos más vendidos con 2 columnas y 2 filas.

Pensamientos finales

WooCommerce Blocks es un complemento interesante. Los bloques son fáciles de usar y proporcionan algunas herramientas útiles de categoría, diseño y filtrado. Me gustan los controles deslizantes de diseño de filas y columnas. Si desea realizar ajustes en su texto, botones, superposiciones flotantes, etc., tendrá que usar CSS, pero al menos CSS personalizado es una opción. Los bloques son excelentes para crear páginas de ventas o agregar productos dentro de su contenido.

Me gustaría ver algunas características de estilo más (especialmente para los botones, texto y superposiciones de desplazamiento). Seguí queriendo personalizar como lo haría con Divi (creo que Divi me ha echado a perder). Incluye los campos de clase CSS que ayudarán a aquellos que usan CSS. Incluso sin muchas personalizaciones, me gustó usar los bloques. Si desea incluir productos WooCommerce en sus páginas y publicaciones de Gutenberg, vale la pena probar WooCommerce Blocks.

Queremos escuchar de ti. ¿Has probado los bloques de WooCommerce? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de Jomic / shutterstock.com