WooCommerce y Gutenberg

Ya tenemos aquí a Gutenberg, el nuevo editor de contenido de WordPress y, aunque hay quien opina lo contrario, en mi caso, me resulta muy cómodo trabajar con él. Lo fui probando desde las primeras «beta» y lo cierto es que a día de hoy no echo de menos al editor clásico.

Muchísimos son los themes y plugins que se han adaptado o son compatibles con Gutenberg. En ese sentido, de momento, WooCommerce no ha hecho nada, aunque podemos seguir usándolo tal y como lo hemos hecho hasta ahora, el nuevo editor no afecta para nada a la utilización de WooCommerce. Cuando entremos a editar o crear productos, ajustes, etc… lo veremos todo igual que antes, aunque con el tiempo iremos viendo como se irá adaptando al nuevo editor.

Si echas un vistazo al blog de WooCommerce te muestran una captura de lo que podría ser la interfaz de crear productos una vez adaptado al nuevo editor (Ver imagen 1).

Prototipo de como podríamos ver WooCommerce una vez adaptado a Gutenberg.
Imagen 1

WooCommerce Blocks

Pero… ¿Tenemos algo de momento? Pues si.

Existe un plugin que te permite introducir productos en tu contenido, tanto en páginas como en entradas. Se va actualizando muy a menudo por lo que constantemente van introduciendo más opciones.

Busca e instala WooCommerce Blocks y una vez activado aparecerá la sección «WooCommerce» en el menú «Añadir bloque» del nuevo editor (Ver imagen 2) y al entrar en el, encuentras las opciones que vamos a ir viendo a continuación (Ver imagen 3).

Nueva sección en el menú "Añadir bloques" al activar WooCommerce Blocks.
Imagen 2
Bloque añadidos por WooCommerce Blocks.
Imagen 3

Voy a ir explicando para que sirven cada una de estas opciones.

Productos elegidos manualmente

En este bloque puedes introducir en tu entrada o post, productos elegidos manualmente por ti.

Opciones de "Productos elegidos manualmente".
Opciones de «Productos elegidos manualmente».

Puedes buscar el producto por su nombre, conforme vayas escribiendo se irá acotando la búsqueda con respecto a la coincidencia con los caracteres que vayas introduciendo, o elegir el producto o productos marcando las casillas correspondientes.

En la barra de la derecha puedes seleccionar el número de columnas que quieres que se muestren y el orden en el que aparecerán los productos.

Una vez hayas seleccionado los productos pulsas en «Hecho» y obtendrás una aproximación de lo que luego verás en el front-end.

Productos mas vendidos

Si seleccionas el bloque de «Productos mas vendidos», automáticamente aparecerán los productos que mas se han vendido en tu tienda.

En «Diseño» puedes decidir cuantas columnas y filas quieres que se muestren, y en «Filtrar por categorías de producto», seleccionar una o más categorías (o sub-categorías), para que solo se muestren productos que pertenezcan a ellas.

Productos por categorías

A estas alturas te habrás dado cuenta de lo intuitivo que es usar estos bloques. Este te muestra los productos de las categorías o sub-categorías que selecciones. En el caso de que elijas más de una categoría, aparece un select en que debes elegir entre dos opciones:

  • «Cualquier categoría seleccionada». Muestra los productos que pertenezcan a estas categorías.
  • «Todas las categorías seleccionadas». En este caso solo se mostrarán los productos que pertenezcan a ambas categorías.

Pulsas en «Hecho» y en la barra de la derecha podrás elegir las opciones que ya conoces. Cantidad de columnas y filas y en el orden que quieras que se muestren.

Productos recientes

Este bloque muestra los últimos productos que hayas introducido en tu tienda. Las opciones de configuración son, la cantidad de columnas y filas, y a que categorías pertenecen.

Productos rebajados

Este mostrará los productos que tienen algún tipo de descuento. Puedes configurar, columnas y filas, el orden en el que se mostrarán y a que categoría pertenecen.

Productos mas valorados

Lo mismo que llevamos viendo hasta ahora. En este caso muestra los productos que mejor han valorados nuestros clientes. como configuración disponemos de la elección de columnas y filas y de filtro de categorías.

Producto destacado

Este bloque si que es un poco distinto de lo que llevamos visto hasta ahora. A mi me gusta bastante.

Se trata de un bloque en el que eliges un producto y sobre la imagen de este se muestra la descripción y precio (opcional), el nombre y un botón que te lleva al producto.

Una vez seleccionas el producto, las opciones de configuración son las siguientes:

  • Puedes alinear el conjunto de nombre, descripción, precio y botón a la derecha, centro o izquierda.
  • Personalizar el texto del botón, con otro que tu elijas.
  • Cambiar la imagen por defecto del producto.
  • En «Contenido» decides si quieres que se muestre o no la descripción y el precio.
  • Superponer un color a la imagen y controlar la opacidad de este.

De momento esto es todo, como dije antes, este es un plugin que se va actualizando constantemente y se le van añadiendo opciones nuevas. no descarto hacer un segundo post en el momento que se haya ampliado lo suficiente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *