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

Tiempo de lectura:

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

11/19/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

26 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
  2. David

    Hola Max, estoy construyendo una tienda con Divi y tengo un problema con la ficha de producto y es que cuando empiezo a construir con el divi builder la foto de producto se ve pequeña algo que no pasa en el editor estandar, donde la foto aparece perfecta, espero me puedas ayudar, un saludo.

    Responder
    • Max Camuñas

      Hola David,

      Sin ver la web me resulta muy difícil poder ayudarte ?

      Responder
  3. Albert

    Hola Max. Muy interesante tu blog. Muchas gracias por tus explicaciones.

    Estoy introduciéndome en el mundo de Divi porque estoy trabajando en una cartelera teatral. Me resulta complicado crear una página con una lista de los espectáculos vigentes y algunas de sus características presentadas en la misma linea. Por ejemplo: West Side Story / Musical / Dia inicio / Dia final y que todos ellos se presenten en la fecha anterior a su finalización.

    La única manera que veo para presentar un listado con todos los espectáculos vigentes a fecha de hoy sin tocar código es con los módulos de Blog de Divi. Pero es muy hermético. No me da opción a incluir diferentes campos de Post Types.

    He visto que en este artículo estás mostrando fichas de productos a través de WooComerce. ¿Crees que ésta seria la manera de hacerlo? ¿Podría incluir en el listado campos como fechas, duración del espectáculo etc? ¿O mejor esperar a que salga Divi 5 a ver que trae?

    Gracias de antemano y perdona el rollo.

    Responder
    • Max Camuñas

      Hola Albert,

      Para montar una agenda cultural te recomiendo recurrir a algún plugin que te permita gestionar eventos y/o calendarios.

      Cuando he tenido que añadir este tipo de funcionalidad en una web, lo he hecho con el plugin «The Events Calendar», que se integra bien con Divi.

      Con WooCommerce no te lo recomiendo si solo necesitas eventos informativos (no venta de entradas o tickets).

      Espero haberte sido de ayuda.

      Saludos

      Responder
      • Albert

        Muchas gracias Max.

        Responder
  4. Carmen Poyato Pérez

    Buenos días Max:

    Me gustaría incluir un formulario de consulta en cada uno de los productos de woocomerce, para una página que estoy creando (maquinariarico.es) pero que cuando el cliente reciba la consulta se asocie el producto desde el que se envía el formulario.

    Qué me sugieres para poder hacerlo??

    Gracias

    Responder
    • Max Camuñas

      Hola Carmen,

      Si la tienda no tiene muchos productos, te recomiendo hacerlo con Contact Form 7, generando un formulario para cada producto e incluyéndolo en su ficha, pegando el shortcode que genera el formulario.

      Ya me contarás cómo lo has solucionado.

      Saludos

      Responder
  5. Alicia

    ¡Muchísimas gracias por el artículo!

    Está muy bien explicado y me ha venido perfecto para lo que necesitaba 🙂

    Responder
    • Max Camuñas

      Me alegro de que te sea útil, Alicia 🙂

      ¡Muchas gracias por tu comentario!

      Responder
      • Alicia

        Hola Max, me ha surgido un problema. Al intentar editar uno de los productos me sale este mensaje:

        A esta publicación se le ha asignado una plantilla utilizando el generador de temas, sin embargo, la plantilla que se está utilizando no contiene un módulo de contenido de publicación.

        Se requiere un módulo Publicar contenido para agregar contenido único dentro de la plantilla del generador de temas. Una vez que se haya agregado un módulo de Contenido de publicación a la plantilla, podrá agregar contenido de publicación único dentro de esa área para cada publicación utilizando la plantilla.

        Plantilla actual: Todos Productos

        Si añado un nuevo módulo de publicar contenido en la plantilla (dentro de «Cuerpo personalizado») se duplica el contenido de la página y lo que sale en la parte de arriba no puedo editarlo. Si intento ponerlo en el pie de página, no puedo.

        Y no cómo arreglarlo 🙁

        Responder
        • Max Camuñas

          Hola Alicia,

          Tendría que verlo para ver qué esta fallando. Con tan poca información no sé decirte.

          Mándame un email para valorarlo. Puedes contactar conmigo desde aquí 😉

          Responder
  6. Andrea

    Hola Max, tu post me ha ayudado mucho. Ando un poco perdida con el Divi y es la primera página web que diseño.

    Pero me encuentro con el mismo problema que Alicia (comentario anterior), no se como solucionarlo. Me preguntaba si encontrasteis la solución, para mi sería un gran alivio porque ya nose que hacer…..

    Muchas gracias por este artículo, cuando estás perdido viene muy bien que alguien te guie en el camino.

    Responder
    • Max Camuñas

      Hola Andrea,

      Si estás creando una ficha de producto con el generador de temas, debes usar los módulos específicos de Divi para WooCommerce.

      El módulo «publicar contenido» no funciona con productos, sino con entradas, páginas y proyectos.

      Espero haberte ayudado.

      Saludos

      Responder
    • Alicia

      Andrea, yo no conseguí solucionarlo, así que guarde la ficha de producto y la aplico manualmente a cada producto. Da un poco más de trabajo, pero como hay que editar cada una para introducir los datos, me sirve como apaño.

      Responder
      • Max Camuñas

        Lo siento mucho, Alicia.

        Pensé que habías conseguido solucionarlo, o eso me pareció entender en el correo que me mandaste 🙁

        Responder
        • Alicia

          Ah, no pasa nada, Max 🙂 Ese apaño me parece ideal, jajaja. Cuando tenga más tiempo seguiré investigando a ver si encuentro porqué no me funciona.

          Responder
      • Macarena

        [POSIBLE SOLUCIÓN]

        Hola a todos, yo tenía el mismo problema, y al final lo he solucionado, en mi caso es algo muy simple: el error está cuando creas las páginas de producto, NO hay que usar el constructor Divi, sino la plantilla nativa WordPress-Woocommerce. Es decir, sigues los pasos y creas la plantilla de página de producto en el generador de temas. Una vez terminada, creas las páginas de producto tal cual vienen en WordPress-Woocommerce, SIN USAR USAR EL CONSTRUCTOR DIVI (Max, quizás debas insistir en esto al final del post).

        Si ya tenéis los productos creados, podéis quitar el constructor Divi, los datos se mantienen y coge la plantilla creada en el generador de temas. Puede ser mucho trabajo si tenéis muchos productos, pero es muy útil para cuando quieras hacer algún cambio o añadir alguna cosa, lo haces en «todos los productos de una vez».

        Un saludo a todos, espero que a vosotr@s también os sirva.

        Responder
        • Max Camuñas

          Hola Macarena,

          Así es, las fichas de producto se suben a WooCommerce con el editor de WordPress, no se maquetan con Divi. Lo que hay que diseñar con Divi es la plantilla para los productos, con el generador de temas.

          ¡Muchas gracias por tu comentario!

          Saludos

          Responder
  7. chris

    Como se puede corregir desde el generador de tema, el error de modulo de contenido FALTANTE?

    GRACIAS

    Responder
    • Max Camuñas

      Hola Chris,

      Tienes que revisar el diseño en el generador de temas para encontrar dónde está el problema y corregirlo.

      Saludos

      Responder
    • Macarena

      Mira mi respuesta de más arriba, quizás te sirva, un saludo

      Responder
  8. Mario

    Hola Max, muchas gracias, una vez más has hecho el mejor post sobre el tema que he encontrado.

    Tengo una pregunta muy de novatos: ¿Es obligatorio que el proceso de venta pase por el carrito? ¿No se puede hacer para que una vez clicken en comprar algo aparezca directamente una pasarela de pagos o algo así para pagar con tarjeta?

    Muchísimas gracias,

    Mario

    Responder
    • Max Camuñas

      Hola Mario,

      Muchas gracias por tu comentario 🙂

      En ese caso, tendrías que fusionar las páginas de pedido y finalizar compra en una sola.

      Así lo tengo montado, por ejemplo, en la web de DiviFast.

      Saludos

      Responder
  9. Wilson Arce

    Muchas gracias amigo. Me sirvió mucho su información. Saludos y bendiciones.

    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.

Diseña
tu web

Diseña
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guía

PARA DISEÑAR LOGOTIPOS MEMORABLES

GUÍA para diseñar logotipos memorables