WooCommerce y los Bloques de Productos para Gutenberg

Categorias: WooCommerce

WooCommerce y los Bloques de Productos para Gutenberg

Si estás más o menos al tanto de las novedades en el mundo WordPress, sabrás que con la versión 5.0 se cambió el clásico editor de WordPress, por Gutenberg.

El nuevo editor se basa en los llamados bloques de contenido, algo muy del estilo de los builders más populares, en los que el usuario solo tiene que “arrastrar” el bloque con el contenido para colocarlo donde quiera y así ir creando el diseño.

Hay bloques de todo tipo, están los habituales de texto o imágenes, pero bloques para todo tipo de elementos, párrafos, citas, vídeos, Twitter, salto de página, etc…

Para los usuarios de WooCommerce, a partir de la versión 3.5, se preparó un plugin para poder añadir un bloque de productos directamente en el contenido de la página.

Con la llegada de la versión WooCommerce 3.6, la integración de los bloques WooCommerce en WordPress ha mejorado bastante.

Ahora se pueden añadir nuevos bloques en cualquier parte del contenido. Los nuevos bloques son más versátiles y proponen nuevas formas de mostrar los productos en cualquier parte del contenido de la web.


Preparativos Previos para usar los Bloques WooCommerce

Hay que tener en cuenta algunos aspectos básicos para poder usar estos nuevos bloques en WordPress.

1. Hay que tener instalado WordPress 5.x

2. Tener el plugin WooCommerce Blocks instalado.

3. Tener activado el editor Gutenberg en WordPress

Hay muchos usuarios que no se sienten a gusto con el editor Gutenberg todavía, así que instalan un plugin ofrecido por el propio WordPress, para volver al editor clásico, aunque se actualice a la versión 5.x de WordPress.

Si se tiene instalado y activo este plugin, no será posible usar los WooCommerce Blocks.

Después de eso tenemos que actualizar WooCommerce a la versión 3.6.x.

Como siempre, haz una copia de seguridad antes de actualizar. Si hay algún problema en la actualización, podrás tener tu tienda online en pocos minutos.

Si no tienes un backup preparado, tendrás muchos dolores de cabeza.

IMPORTANTE: Antes de actualizar, recuerda hacer una copia de seguridad de base de datos y contenido.

Por lo general, si WooCommerce detecta algún problema con algún otro plugin antes de actualizar, te avisará al respecto.

woocommerce actualizador problemas en WordPress

Una vez hayamos actualizado o instalado todo, ya puedes empezar a usar los bloques de WooCommerce


8 Bloques WooCommerce Nuevos para Gutenberg

El uso de los bloques WooCommerce no tiene nada que ver con la forma de añadir los productos en WooCommerce, esa parte seguirá igual que hasta ahora.

Donde encontrarás las novedades será en el apartado de bloques de Gutenberg, donde podrás encontrarás la sección destinada a WooCommerce con 8 opciones para poder añadir distintos bloques.

bloques woocommerce gutenberg WordPress

Estos son los distintos bloques que puedes encontrar:


Bloque WooCommerce Producto Destacado

EL bloque de Producto Destacado puedes usarlo para mostrar un solo producto, pero de forma que destaque mucho más de lo normal, como su propio nombre indica.

Podrás configurar varias cosas en este bloque, como la alineación del texto, mostrar el precio de producto, cambiar el botón, etc…

Si estás hablando de un producto en un post y quieres mostrarlo a lo grande, esta será tu opción.

muestra producto destacado WordPress


Bloque Productos Elegidos Manualmente

Este bloque no tiene mucho misterio. Simplemente escogeremos los productos que queremos mostrar.

Los productos se mostrarán en cuadrícula, pudiendo determinar el número de columnas, si queremos mostrar el precio, botón de añadir al carrito, etc…

muestra productos elegidos WordPress

Bloque Productos Recientes

El bloque de Productos Recientesse encargará de mostrar una selección de los productos nuevos.

Podemos seleccionar la categoría o categorías que queremos mostrar en ese bloque y también se mostrarán en forma de cuadrícula.

muestra productos recientes WordPress


Bloque Productos más Vendidos

Los productos más vendidos son todo un clásico. En la mayoría de las tiendas online encontrarás un apartado para mostrarlos, ya que ofrecen una confianza al comprador, “Si muchos clientes han comprado este producto…”

El bloque Productos más Vendidos no ofrece la posibilidad de mostrar estos productos donde queramos.

También se mostrarán en forma de cuadrícula y podemos elegir su diseño, filtrarlos por categorías, etc…

muestra productos mas vendidos WordPress


Bloque Productos por Categoría

Si queremos mostrar los productos por categorías también podemos hacerlo.

Además, podemos dar preferencias sobre cómo mostrar los productos de la categoría, por precio, los más nuevos antes, etc…

muestra productos categoria WordPress


Bloque Productos Rebajados

Si ya has trabajado con WooCommerce, o cualquier otra plataforma de comercio electrónico, sabrás que los precios rebajados llaman mucho la atención de los clientes.

Por supuesto, tienes un bloque para seleccionar los productos rebajados entre los elegidos por WooCommerce.

Además de añadir los productos rebajados, podrás seleccionar la categoría o el orden de aparición, los que ofrezcan mayor descuento, los más novedosos, etc…

muestra productos rebajados WordPress


Productos más Valorados

En WooCommerce puedes activar las valoraciones del producto, que son las típicas estrellas en las que los usuarios pueden marcar para mostrar su agrado o desagrado con el producto.

Como consumidor harás más o menos caso a estas valoraciones, pero es innegable que tienen su impacto.

Si quieres mostrar un bloque con los productos mejor valorados, solo tienes que seleccionarlo.

muestra productos valorados  WordPress


Productos por Atributo

Los atributos en WooCommerce son algo muy importante para algunos tipos de tienda online.

Sirven para definir los productos dentro de una misma categoría o diferentes categorías.

Por ejemplo, si vendes camisetas, un atributo sería Managa Corta o un color, Rojo. Así un cliente puede ajustar su búsqueda respecto a los atributos de un producto.

Así que si queremos añadir para mostrar los artículos de ciertos atributos, podemos hacerlo sin mayores problemas.

muestra productos atributo WordPress

Cosas a Tener en Cuenta

Además de añadir los 8 bloques distintos de WooCommerce, los desarrolladores hacen hincapié en que están perfectamente integrados con el núcleo de WooCommerce, por lo que el rendimiento es muy efectivo a partir de la versión3.6.

Como es habitual en WordPress, la personalización es una constante y aunque los bloques WooCommerce cuentan con personalización para adaptarse a todos los diseños, se echa de menos una personalización algo más intensa.

Hosting WooCommerce SSD

Hosting WooCommerce