Bloques en WooCommerce. Monta una tienda online con Gutenberg

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email
(Votos: 2 Promedio: 5)

Seguimos hablando un día más de recursos y alternativas para montar tu tienda online con WordPress.

¿Te está gustando la serie?

En este caso nos vamos a centrar en qué podemos diseñar y construir desde el editor de WordPress utilizando bloques de Gutenberg propios de WooCommerce.

En este caso tengo instalado, naturalmente además de WooCommerce, el plugin de WooCommerce Blocks. Pero no es obligatorio para poder utilizar lo que vamos a ver a continuación.

Te mostraré todos los bloques propios de tiendas online, para qué sirven y qué opciones tienen.

Al final te dejo un vídeo donde puedes ver en real cómo funcionan algunos de ellos. Interesante sobre todos los que tienen que ver con la página de la tienda y los diferentes filtros.

Por cierto, te diré que estoy utilizando el tema GeneratePress para realizar toda la serie de artículos sobre WooCommerce, pero funcionaría exactamente igual si eliges cualquier otro.

¡Vamos allá!

Bloque: todos los productos

Parrilla de los productos de la tienda en formato de cuadrícula.

Puedes realizar los siguientes ajustes de diseño:

  • Escoge el número de columnas de la cuadrícula.
  • Escoge el número de filas de la cuadrícula.
  • Alinea todos los elementos verticalmente.
  • Muestra u oculta la posibilidad de ordenar los productos.
  • Selecciona la ordenación por defecto.
Bloque de cuadrícula de producto en WooCommerce
Bloque de todos los productos

Bloque: filtrar productos por atributo

Muestra una lista de filtros basados en un atributo seleccionado de entre los que están creados y tiene productos asignados en tu tienda online.

El bloque tiene las siguientes propiedades:

  • Selecciona el atributo por el que filtrar.
  • Muestra u oculta el total de productos asignados a ese atributo.
  • Selecciona el nivel del encabezado.
  • Selecciona la lógica de la consulta: “and” o “or”.

Bloque: filtros de productos activos

Muestra los filtros que están activos en ese momento, es decir, los que están afectando a la cuadrícula de productos.

Puedes configurar las siguientes opciones:

  • Estilo de visualización de los filtros activos: formato lista o ficha.
  • Selecciona el nivel del encabezado.

Bloque: filtrar productos por precio

Coloca una barra de control deslizante entre el precio más bajo y más alto de la tienda que sirve para filtrar los productos por intervalo de precio.

Este módulo tiene alguna configuración:

  • Escoge el modo de mostrar el rango de precios: en formato texto fijo o formato editable donde se pueda insertar el precio vía teclado numérico.
  • Botón de filtrado para evitar actualización automática.
  • Nivel de encabezado
Bloques de filtros de tienda online en WooCommerce
Así se vería tu tienda online aplicando los bloques anteriores

Bloque: todas las valoraciones

Crea una lista con todas las valoraciones de productos, que se pueden ordenar por fecha, por valoración más alta o por valoración más baja.

El bloque es muy configurable:

  • Elige si mostrar o no el nombre del producto, la valoración, el nombre del usuario que valora, su avatar (o foto del producto), la fecha de valoración o el contenido de valoración.
  • Muestra o no la posibilidad de ordenar y cuál es la ordenación por defecto.
  • Escoge el número de valoraciones y si se pueden cargar más.

Bloque: categoría destacada

Destaca en grande una categoría elegida indicando el título de la categoría, la descripción, la foto asociada de fondo y una llamada a la acción.

Dales forma y color a los elementos:

  • Selecciona si mostrar o no la descripción de la categoría.
  • Elije un color de superposición semitransparente por encima de la imagen destacada de la categoría.
  • Coloca la imagen como a ti más te guste
  • Escoge el tipo de botón a mostrar.
  • Indica el radio del borde.
  • Configura el color de texto y el color de fondo del mismo.
  • Maneja el enlace del botón. ¿Abre en una nueva pestaña? ¿Tiene un nofollow?

Bloque: producto destacado

Puedes destacar un producto único, incluso una de sus variaciones, indicando título de producto, descripción corta, foto destacada y llamada a la acción.

Sus opciones de configuración son similares a las de la categoría destacada, quedando algo tal que así.

Bloque de producto único en WooCommerce
Un producto destacado con llamada a la acción

Bloque: productos elegidos manualmente

Crea una parrilla de productos en formato cuadrícula eligiéndolos manualmente.

La parrilla es bastante configurable:

  • Escoge el número de columnas que tendrá.
  • Puedes alinear los botones verticalmente.
  • Puedes elegir mostrar o no el título de cada producto, su precio, su valoración y el botón de añadir al carrito.
  • Indica cual es el criterio de ordenación.
  • Escoge los productos a mostrar.

Bloque: productos más vendidos

Crea una parrilla de productos en formato cuadrícula con los productos más vendidos desde que se instaló WooCoomerce.

Puedes personalizar el diseño con las siguientes opciones:

  • Indica el número de columnas y filas de la parrilla.
  • Escoge si alinear o no verticalmente el bloque.
  • Muestra o no el título de cada producto, el precio, la valoración o el botón de añadir al carrito.
  • Además, puedes escoger mostrar los productos de todas o de alguna categoría en concreto.

Bloque: lista de categorías de productos

Muestra una lista de categorías de productos en formato desplegable o lista.

El bloque tiene las siguientes propiedades:

  • Muestra o no la cantidad de productos asignados a esa categoría.
  • Muestra o no la jerarquía de categorías.
  • Muestra o no las categorías vacías.
  • Elige si las categorías se muestran en formato desplegable o lista.
Bloque de categoría de producto en WooCommerce
Desplegable de categorías de WooCommerce

Bloque: productos por categoría

Crea una parrilla de productos en formato cuadrícula con los productos asignados a la categoría escogida.

Puedes personalizar las siguientes opciones:

  • Selecciona las categorías que se mostrarán en la cuadrícula.
  • Indica el número de columnas y filas de la parrilla.
  • Escoge si se debe alinear o no el bloque verticalmente.
  • Muestra o no el título de cada producto, el precio, la valoración o el botón de añadir al carrito.
  • Indica cual es el criterio de ordenación.

Bloque: productos recientes

Crea una parrilla de productos en formato cuadrícula con los productos más recientemente añadidos a la tienda online.

Las opciones son muy similares al bloque anterior.

Bloque: productos en oferta

Crea una parrilla de productos en formato cuadrícula con los productos que en estos momentos están en oferta.

De nuevo, las opciones de este bloque son iguales que los dos anteriores.

Bloque: productos por atributo

Crea una parrilla de productos en formato cuadrícula con los productos seleccionados a partir de los atributos escogidos.

Además de escoger por que atributo se deben listar los productos, las opciones a configurar son idénticas a los bloques anteriores.

Bloque: productos mejor valorados

Crea una parrilla de productos en formato cuadrícula con los productos más valorados por los clientes.

A riesgo de ser pesado diré que las opciones de configuración son iguales que los bloques inmediatamente anteriores: selección de columnas y filas, alineación vertical, un filtro de categorías (mostrar productos de todas o solo de algunas específicas) y mostrar u ocultar diferentes partes del contenido.

Bloque: valoraciones por producto

Muestra las valoraciones de un producto en concreto que tú elijas.

Las opciones de diseño son las siguientes:

  • Escoge el producto del que mostrar los valores.
  • Elige si mostrar o no el nombre del producto, la valoración, el nombre del que valora, su avatar (o foto del producto), la fecha de valoración o el contenido de valoración.
  • Muestra o no la posibilidad de ordenar y cual es la ordenación por defecto.
  • Escoge el número de valoraciones y si se pueden cargar más.
Bloque de valoraciones de producto en WooCommerce
Valoraciones de clientes

Bloque: valoraciones por categoría

Muestra las valoraciones de los productos que están asignados a una categoría concreta.

Una vez escogida la o las categorías de los productos de los que mostraremos las valoraciones, las opciones de configuración son iguales que las del bloque anterior.

Bloque: búsqueda de productos

Coloca una barra de búsqueda para encontrar más fácilmente los productos.

El bloque no tiene opciones. Se inserta y funciona.

Bloque: productos por etiqueta

Crea una parrilla de productos en formato cuadrícula según la etiqueta seleccionada.

Puedes modificar las siguientes opciones:

  • Indica el número de columnas y filas de la parrilla.
  • Escoge si alinear o no verticalmente el bloque.
  • Muestra o no el título de cada producto, el precio, la valoración o el botón de añadir al carrito.
  • Además, puedes escoger mostrar los productos de todas o de alguna categoría en concreto.

¿Cómo funcionan los bloques en WooCommerce? Mira el video

Conclusión

Como puedes ver existen bloques propios de WooCommerce que se pueden insertar en diferentes partes de tu web desde el editor de WordPress.

Bajo mi punto de vista aún hay mucha (muchísima) margen de mejora en este aspecto. Los bloques que hemos visto no llegan para abarcar todos los diseños posibles de tu tienda y es posible que necesites plugins adicionales.

Eso no significa que no debas conocer cuáles son y cómo funcionan. Por cierto, de esto mismo voy a hablar en la WordCamp España. Pásate a ver la ponencia si te apetece 😊.

Gutenberg y el nuevo paradigma de bloques están aquí y serán el futuro de WordPress.

Más vale habituarse y seguir muy de cerca todo lo que está avanzando.

Y tú, ¿los has utilizado alguna vez? ¿Qué opinas?

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

Los últimos artículos

Deja un comentario



2 comentarios

  1. Hola Anxo. Gracias por tus posts. a ver si me puedes contestar una pregunta. ¿es posible que haya temas incompatibles con los bloques de productos? tengo una web en la que tenía en la página de la tienda un bloque y salía perfectamente. He cambiado el tema y aunque al editar la página de la tienda veo el bloque en la pçagina en sí no lo veo. ¿Puede haber incompatibilidad o hago algo mal?

    Responder
    • Hola Beatriz. Yo no me he encontrado en los temas que he probado ninguna incompatibilidad, pero podría ser. ¿Qué tema es en concreto? A lo mejor no es el tema sino alguno de los otros plugins instalados. Un saludo.

      Responder