Cómo diseñar un producto de WooCommerce con Divi

Autor: Max Camuñas

Fecha: 19/11/2019

Si eres de los que utiliza el tema Divi en su web, ya sabrás que desde hace unas semanas está disponible el Theme Builder, que permite editar las partes partes generales del sitio, como son la cabecera, el cuerpo o el footer.

Esta funcionalidad tan esperada ha llegado con la gran actualización de Divi 4.0, que ya analicé unos días después de su lanzamiento.

Además, en una actualización previa lanzada en septiembre también se añadió el constructor de WooCommcerce para Divi, otra reivindicación común entre los diseñadores web que usamos este tema, pues hasta entonces no era posible modificar los productos sin recurrir a plugins o a código.

Es decir, ahora tenemos disponibles 16 módulos nuevos específicos para WooCommerce.

16 módulos de Divi para WooCommerce

Pues bien, hoy te voy a explicar cómo diseñar un producto de WooCommerce con Divi a paso para que personalices al máximo las fichas de tu tienda online.

Maquetar una ficha de producto de WooCommerce con Divi


Una vez has instalado, activado y configurado WooCommerce, el primer paso es crear un producto y completar los campos según tus necesidades:

  • Nombre del producto (título)
  • Descripción corta.
  • Descripción larga.
  • Precios (normal y rebajado).
  • Categorías y etiquetas.
  • Imagen del producto.
  • Galería de fotos.
  • Variaciones e información adicional si la hubiera.

En este ejemplo puedes ver cómo lo he hecho yo:

Cómo diseñar un producto de WooCommerce con Divi

Una vez hayas completado toda la información de la ficha de producto, la publicas y así quedaría por defecto:

Cómo diseñar un producto de WooCommerce con Divi

¡Ahora empezamos el proceso de diseño de un producto de WooCommerce con Divi!

Para ello, dentro de la edición de la ficha de producto clicas en el botón usar el constructor Divi.

Cómo diseñar un producto de WooCommerce con Divi

Una vez se ha cargado el editor visual, ya puedes empezar con el diseño y maquetación. Y si te fijas en los módulos de Divi para WooCommerce, verás que aparecen los 16 que te mostré arriba.

Como ves, ahora puedes editar, mover y arrastrar cualquiera de los módulos a tu gusto: título, descripción, precio, categoría, etc.

Cómo diseñar un producto de WooCommerce con Divi

Una vez hayas concluido el diseño y esté todo a tu gusto, solo tienes que guardar los cambios y los verás reflejados en tu ficha de producto.

Este es el resultado de mi diseño:

Cómo diseñar un producto de WooCommerce con Divi

Cómo extender tu diseño de ficha con Divi al resto de productos


Ahora que has maquetado tu ficha de producto a tu gusto con Divi, es el momento de extender este diseño al resto de artículos de tu tienda online.

¿Cómo puedes hacerlo?

¡Con Divi Theme Builder el realmente sencillo!

Para ello, debes seguir los siguientes pasos:

1) Vas a Theme Builder dentro de las opciones de Divi:

Cómo diseñar un producto de WooCommerce con Divi

2) Añades una nueva plantilla y seleccionas todos los productos o la categoría específica a la que quieras asignar este diseño:

Cómo diseñar un producto de WooCommerce con Divi

3) Clicas en el botón azul «create template» y editas el cuerpo de la plantilla: «build custom body«.

Cómo diseñar un producto de WooCommerce con Divi

4) Una vez se han cargado las opciones del editor visual de Divi, seleccionas «elegir diseño» (la opción central):

Cómo diseñar un producto de WooCommerce con Divi

5) Ahora eliges la tercera pestaña (sus páginas existentes) y seleccionas el producto que acabas de diseñar:

Cómo diseñar un producto de WooCommerce con Divi

6) Guardas los cambios tanto en el editor visual como en Divi Theme Builder y ya tienes asociado tu diseño de ficha a todos los productos de la tienda.

Por último, te dejo un vídeo tutorial en el que te explico todo el proceso paso a paso:

Portada: elegantthemes.com/blog

Summary
Cómo diseñar un producto de WooCommerce con Divi
Article Name
Cómo diseñar un producto de WooCommerce con Divi
Description
En este tutorial te enseño a diseñar un producto de WooCommerce con Divi a paso para que personalices al máximo las fichas de tu tienda online.
Author
Publisher Name
Max Camuñas
Publisher Logo

2 Comentarios

  1. Óscar Martín

    Max, ¡qué buen artículo!

    Y me viene ‘al dedillo’, porque estaba pensando en cómo cambiar los productos que tengo en Woocommerce (para que sea más atractiva la presentación). Así que esto me viene de perlas 😀

    Un abrazote.

    Responder
    • Max Camuñas

      👏👏👏 ¡me alegro!

      Gracias por pasarte, amigo.

      Un abrazo

      Responder

Enviar un comentario

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

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!