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:

  • – Producto Destacado
  • – Productos Elegidos Manualmente
  • – Productos Recientes
  • – Productos más Vendidos
  • – Productos por Categoría
  • – Productos Rebajados
  • – Productos más Valorados
  • – Productos por Atributo


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 especializado en Woocommerce con discos SSDWooCommerce 1desde5´54€ / mes
  • Hosting especializado en Woocommerce con discos SSDWooCommerce 2desde8´34€ / mes
  • Hosting especializado en Woocommerce con discos SSDWooCommerce Cloud 1desde10´21€ / mes
  • Hosting especializado en Woocommerce con discos SSDWooCommerce Cloud 2desde11´67€ / mes
  • Hosting especializado en Woocommerce con discos SSDWooCommerce 1desde5´54€/mes
  • Hosting especializado en Woocommerce con discos SSDWooCommerce 2desde8´34€/mes
  • Hosting especializado en Woocommerce con discos SSDWooCommerce Cloud 1desde10´21€/mes
  • Hosting especializado en Woocommerce con discos SSDWooCommerce Cloud 2desde11´67€/mes
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu Woocommerce
    • Aumenta la velocidad de tu web + Info
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WoocommerceIdeado para sacar el máximo partido a tu WoocommerceIdeado para sacar el máximo partido a tu WoocommerceIdeado para sacar el máximo partido a tu WoocommerceIdeado para sacar el máximo partido a tu Woocommerce
    • Instala de manera automatica tu Woocommerce en el momento de la contratacion.
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Cada dominio alojado muestra un contenido único y diferente del restoCada dominio alojado muestra un contenido único y diferente del restoCada dominio alojado muestra un contenido único y diferente del restoCada dominio alojado muestra un contenido único y diferente del restoCada dominio alojado muestra un contenido único y diferente del resto
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Configura tu mail en los gestores de correo mas habituales con solo 3 clicks
    • Centro de datos en Madrid (España)
    • Opcion de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Certificados SSL gratuitosCertificados SSL gratuitosCertificados SSL gratuitosCertificados SSL gratuitos
    • Bases de datos MySQL disponibles para su uso en cada alojamiento webBases de datos MySQL disponibles para su uso en cada alojamiento webBases de datos MySQL disponibles para su uso en cada alojamiento webBases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Completa recopilación de tutoriales sobre Hosting, Dominios y WoocommerceCompleta recopilación de tutoriales sobre Hosting, Dominios y WoocommerceCompleta recopilación de tutoriales sobre Hosting, Dominios y WoocommerceCompleta recopilación de tutoriales sobre Hosting, Dominios y Woocommerce
    • Precio para nuevas contratacionesPrecio para nuevas contratacionesPrecio para nuevas contratacionesPrecio para nuevas contratacionesPrecio para nuevas contrataciones
    • Precio para nuevas contratacionesPrecio para nuevas contratacionesPrecio para nuevas contratacionesPrecio para nuevas contratacionesPrecio para nuevas contrataciones