Una presentación general del nuevo complemento WooCommerce Blocks

Al instalar o actualizar WooCommerce, incluye un nuevo complemento llamado WooCommerce Blocks. Agrega nuevos bloques al editor de bloques de WordPress que le permite agregar productos WoCommerce a sus páginas y publicaciones en este artículo, echaremos un vistazo a los bloques de WooCommerce y veremos qué pueden hacer. Complemento bloques de woocommerce

WooCommerce Blocks es un nuevo complemento para WooCommerce que agrega 7 bloques a Gutenberg:
Producto recomendado
Productos de techo a mano
Los mejores productos de venta
Productos superiores
Los productos más nuevos
Productos en venta
Productos por categoría
Cada uno de los bloques se muestra en una cuadrícula ajustable y son ordenables o filtrables. Las cuadrículas le permiten especificar el número de columnas en el aspecto. Elija entre 1 y 6 columnas que ajusten un control deslizante. Varios bloques también le permiten ajustar el número de líneas. 4 es el valor predeterminado para todos los bloques con columnas o filas. No incluye la paginación, por lo que el número que establece es todo lo que se mostrará.
Los filtros le permiten elegir categorías. Algunos incluyen una función de clasificación, que le permite ordenar por novedad, precio, evaluación, ventas, títulos o comando de 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 nueva pestaña Agregar debajo de los complementos.

Puede activar el bloque en la lista de complementos o haciendo clic en el botón en la parte superior de la placa de WordPress. Uso de bloques de WooCommerce

La nueva pestaña llamada WooCommerce se agrega a la lista de bloques disponibles en el editor de Gutenberg. Dentro de esta pestaña se encuentra el conjunto de 7 bloques de WooCommerce. Cada uno de los bloques tiene un ícono que coincide con lo que hacen, por lo que puede 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 recomendado

El producto recomendado le permite elegir un solo producto de la lista para la pantalla. Puede alinear el texto, editar superposición y editar la imagen. También tiene el campo de clase CSS adicional.

Este bloque tiene las personalizaciones más 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 la edición, 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 hexagonal, el código RGB o ajustar el color con la diapositiva y el selector de color. Me gustan los ajustes superpuestos. Para ajustar el texto o el botón necesitará usar CSS.

Productos de techo a mano
Los productos seleccionados manualmente le permiten seleccionar los productos que se mostrarán. Puede buscarlos en el bloque mismo o desde la columna derecha. Establezca el número de columnas del comando de 1 al 6. Pedido por novedad, precio, evaluación, ventas, títulos o menú.

La selección de los productos se suma a la apariencia de la cuadrícula. Los mejores productos de venta

Los mejores productos vendidos no le permiten elegir nada en el bloque, pero puede realizar todas sus personalizaciones en la configuración correcta. Aquí puede seleccionar el número de columnas y filas (elija entre 1 a 6 para cada uno), filtrar de acuerdo con la categoría y regular CSS. En este ejemplo, hemos elegido 6 columnas, 2 filas y la categoría de ropa. Productos superiores

Los productos con las mejores evaluaciones también agregan los productos a medida que selecciona el bloque. La configuración permite incluir la apariencia estándar para 1-6 columnas y filas, filtración de categoría y CSS. Muestra la configuración predeterminada. Los productos más nuevos

Los productos más nuevos agregan automáticamente los productos a medida que selecciona el bloque. La configuración incluye la apariencia estándar, el filtro de categoría y el CSS. En este ejemplo, elegimos 5 columnas y 3 filas. Dejé el filtro de categoría de forma predeterminada, que incluye cada categoría.


Productos en venta

Los productos a la venta cobran automáticamente todos los productos que están a la venta. También incluye las opciones para columnas y filas, el filtro de productos y CSS. Agrega una opción de pedido después, por lo que puede ordenar por noticias, precio, evaluación, ventas, títulos o comando de menú. En este ejemplo, configuré las columnas en 2 y las filas en 4. Dejé la categoría del producto al valor predeterminado. Productos por categoría
Los productos en categorías le permiten elegir las categorías dentro del bloque e incluir un selector para ayudar a rechazar las elecciones. Para mi ejemplo, solo tenía una opción (cualquier categoría seleccionada). También incluye las opciones de apariencia, selección de categorías, configuraciones de pedido y CSS.

En este ejemplo, seleccioné mis categorías, establecí las columnas en 4, filas en 2 y ordené los productos en orden alfabético. Ejemplos de páginas con bloques de WooCommerceat miran cada bloque en la parte delantera. Agregué una etiqueta para identificarlos. Establecí cada una en un número diferente de columnas, pero todas tienen una fila para 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, creamos una página solo para presentar accesorios. Agregué una imagen de portada y un título y establecí el bloque producido por categoría para mostrar 3 columnas y 6 filas.

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

Aquí hay un CTA corto que agrega un bloque seleccionado manualmente y un bloque de texto a una columna doble.

La página es simple, pero es funcional.

Para esta página, agregamos los productos más vendidos en una 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 productos y puedo agregar algo de relleno al texto, pero es fácil ver el potencial.

Para hacer esto, agregué un aspecto de dos columnas y agregué un bloque de texto y el bloque de 2 columnas y 2 filas. WooCommerce Blocks End Pensings es un complemento interesante. Los bloques son fáciles de usar y ofrecen algunas herramientas útiles de categoría, apariencia y filtración. Me gustan las diapositivas de la apariencia para columnas y filas. Si desea realizar ajustes de texto, botones, superposiciones, etc., deberá usar CSS, pero al menos CSS es una opción. Los bloques son excelentes para crear páginas de ventas o para agregar productos a su contenido. Quiero ver algunas características de estilo (especialmente para botones, texto y superposiciones de mouse). Todavía quería personalizar como lo haría con Div (creo que la división me rompió). Incluye 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 de WooCommerce en sus páginas y publicaciones de Gutenberg, vale la pena probar los bloques de WooCommerce. Queremos escuchar de ti. ¿Has probado los bloques de WooCommerce? Cuéntanos sobre tu experiencia en comentarios. Imagen presentada por Jomic / Shutterstock.com