Cómo personalizar tu tienda en línea con bloques de WooCommerce

El editor de bloques de Gutenberg hace que WordPress sea aún más accesible para los propietarios de sitios de cualquier nivel de habilidad, lo que le permite crear páginas complejas arrastrando y soltando bloques de contenido. Con los bloques de WooCommerce, puede seleccionar y mostrar productos, categorías, filtros y más prácticamente en cualquier lugar de su sitio, ¡sin necesidad de usar códigos abreviados o editar líneas de código!

Echemos un vistazo a los bloques de WooCommerce disponibles y aprendamos a usar cada uno.

Antes de comenzar, actualice WordPress y WooCommerce a la última versión. Nota: Las demostraciones de esta publicación se crearon con el tema Storefront, pero deberían funcionar con cualquier tema compatible con WooCommerce que elijas.

Conozca los bloques de WooCommerce

Puede colocar bloques de WooCommerce en cualquier lugar donde esté habilitado el editor de bloques: publicaciones, páginas y tipos de publicaciones personalizadas. Comience por navegar a la página o publicación que le gustaría editar, luego haga clic en el icono Agregar bloque (que parece un símbolo "más") en la esquina superior izquierda.

Esto abrirá un menú de todos los bloques disponibles. Expanda la pestaña WooCommerce para ver bloques específicos de su tienda en línea.

Consejo profesional: también puede agregar rápidamente bloques al contenido usando el método abreviado de teclado `/`. Por ejemplo, puede ver los bloques de WooCommerce disponibles escribiendo `/woocommerce`.

Al hacer clic en un bloque, se agrega a su página y aparece una variedad de opciones, que cambia según el bloque que haya seleccionado.

Bloques de productos

Los bloques de productos le permiten mostrar productos dentro de la página y publicar contenido. Esta es una excelente manera de vincular productos recomendados dentro de una publicación de blog, mostrar sus últimos productos en una página de destino o crear una página de Tienda personalizada. Hay una variedad de bloques de productos que satisfacen una necesidad específica y se explican con más detalle a continuación:

Bloque de productos destacados

Este es un bloque completamente personalizable que destaca un solo producto. Puede mostrar el título y el precio de un producto y agregar un botón para alentar las compras. También hay muchas configuraciones para la superposición, que incluyen:

• color de superposición
• opacidad de fondo
• Punto focal de la imagen
• Posicionamiento de fondo

Agregue un bloque de productos destacados a una página de destino para captar la atención de sus clientes y servir como un llamado a la acción, o incorpórelo directamente en una publicación de blog como un enlace visual del producto. ¡Las opciones son infinitas!

Bloque de todos los productos

El bloque Todos los productos muestra todos sus productos. Esto es útil si desea insertar otro contenido (texto, imágenes, videos, etc.) encima o debajo de los productos, y es una excelente manera de crear un catálogo visual. Incluye las siguientes opciones:

• Opciones de diseño:
  • Número de columnas y filas: personalice el diseño de la cuadrícula del producto
  • Alinear botones: configure los botones para que caigan inmediatamente debajo del contenido o alinéelos
• Configuración de contenido:
  • Muestre el menú desplegable de clasificación: muestre u oculte un menú desplegable con opciones de clasificación
  • Ordenar productos por: elija el orden predeterminado para los productos según el precio, las calificaciones, la novedad o las ventas.
  • Edite la información que se muestra para los productos: elimine reseñas, agregue una insignia de venta, incluya una descripción y más

Filtrar bloques

Combine los bloques de filtro con el bloque Todos los productos para permitir que los visitantes del sitio reduzcan su búsqueda de productos. Cuando los compradores seleccionan un filtro, los productos se actualizan automáticamente para cumplir con sus criterios, sin recargar la página. Hay tres bloques de filtro disponibles:

• Filtrar por atributos, como color o tamaño
• Filtrar por precio mínimo y máximo
• Mostrar filtros seleccionados activos

El siguiente ejemplo utiliza los tres bloques:

Al combinar estos bloques, puede crear una página de tienda atractiva y fácil de navegar en solo unos minutos.

Bloque de productos seleccionados a mano

El bloque de productos cuidadosamente seleccionados le permite seleccionar manualmente los productos que desea mostrar. Si escribe una publicación de blog titulada "Ideas de regalos de aniversario", podría mostrar productos específicos que mejor se adapten a ese tema directamente dentro de la publicación.

Después de agregar el bloque, seleccione productos específicos de una lista o busque exactamente el que está buscando.

Las opciones para el bloque de productos cuidadosamente seleccionados incluyen:

• Número de columnas: elija hasta seis
• Alinear botones: configure los botones para que caigan inmediatamente debajo del contenido o alinéelos
• Mostrar u ocultar:
  • Titulo del producto
  • Precio del producto
  • Calificación del producto
  • botón añadir al carrito

Productos por bloque de categoría

Este bloque le permite mostrar productos de una categoría específica o varias categorías. Esto es perfecto para páginas de destino específicas o páginas de categorías que requieren contenido adicional. Los ajustes incluyen:

• Categoría de producto: seleccione la categoría o categorías para mostrar
• Número de columnas y filas: personalice el diseño de la cuadrícula del producto
• Alinear botones: permite que los botones sigan inmediatamente el contenido o los alinee verticalmente.
• Mostrar u ocultar:
  • Titulo del producto
  • Precio del producto
  • Calificación del producto
  • botón añadir al carrito
• Ordenar por:
  • Novedad
  • Precio
  • Clasificación
  • Ventas
  • Orden del menú

El siguiente ejemplo tiene una fila y cinco columnas de la categoría 'música':

Bloques de productos adicionales

Hay algunos bloques de productos adicionales que funcionan de manera muy similar a los mencionados anteriormente:

• Productos por etiqueta: mostrar productos basados ​​en etiquetas
• Productos por atributo: mostrar productos basados ​​en atributos
• Productos mejor calificados: muestra los productos con las mejores reseñas
• Productos en oferta: mostrar productos con descuento
• Productos más vendidos: muestre sus productos más vendidos

Revisar bloques

El sesenta y tres por ciento de los clientes tienen más probabilidades de comprar un producto de un sitio con reseñas. Los bloques de revisión pueden ayudarlo a resaltar las revisiones de los clientes en su sitio para proporcionar pruebas sociales y fomentar las ventas según sus necesidades.

Bloque de todas las reseñas

Este es el bloque que necesita si desea mostrar todas las reseñas de sus productos a la vez. Puede usar este bloque para resaltar reseñas en la página de inicio, presentarlas en una página de destino o crear una página específica para testimonios. Las opciones incluyen:

• Mostrar u ocultar:
  • Titulo del producto
  • Calificación del producto
  • Nombre del revisor
  • Imagen: imagen del producto o gravatar del revisor
  • Fecha de revisión
  • Revisar contenido
• Ordenar por: ofrece a los usuarios la opción de ordenar reseñas por:
  • Más reciente
  • Calificación más alta
  • Calificación más baja
• Número inicial de reseñas: el número de reseñas que se mostrarán
• Cargar más: brinda la opción de cargar más reseñas

Reseñas por producto y bloques de categoría

Estos bloques brindan las mismas opciones que el Bloque de todas las reseñas, pero le permiten seleccionar un producto o categoría específicos. Son una excelente manera de incorporar reseñas en publicaciones o páginas de blog. ¿Promover el lanzamiento de un nuevo álbum? Muestra las cinco reseñas principales de ese álbum específico. ¿Escribir una publicación de blog sobre una categoría de producto específica? Mostrar todas las reseñas de esa categoría. Esta es una forma poderosa de involucrar a los visitantes del sitio y demostrar que se puede confiar en sus productos.

Bloque de búsqueda de productos

Cuando los clientes potenciales visiten su sitio, deberían poder encontrar lo que buscan de inmediato. Si quieren comprar un producto específico, lo último que desea es que tengan que navegar página tras página de artículos no relacionados.

El bloque de búsqueda de productos proporciona un formulario de búsqueda simple específicamente para productos. Agréguelo en algún lugar visible de su sitio, en la parte superior o en la barra lateral de las páginas de su tienda y categoría, y permita que los compradores busquen exactamente lo que quieren.

Aprovecha al máximo tu tienda online con WooCommerce Blocks

Lleve su marketing de contenido al siguiente nivel agregando productos directamente en páginas de destino, publicaciones de blog y otros tipos de medios. Los usuarios pueden realizar compras relacionadas con el contenido que les interesa sin ninguna navegación adicional.

El Editor de bloques brinda a los usuarios una gran flexibilidad y control sobre el diseño de su tienda en línea. Cuando se combina con nuestros Bloques de WooCommerce, puede crear una tienda verdaderamente personalizada, agregando todo, desde productos y categorías hasta filtros y reseñas, ¡prácticamente en cualquier lugar que necesite!

Manténgase actualizado sobre los últimos bloques para WooCommerce