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

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 generador de temas o Divi 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.

Subir un producto a WooCommerce


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

Cómo extender tu diseño de ficha con Divi a los productos


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

Para ello, vas al generador de temas de Divi y añades una nueva plantilla:

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

Eliges los productos para los cuales quieres crear dicha plantilla. Tienes varias opciones:

  • Todos los productos: si quieres que todos los productos de tu tienda tengan el mismo diseño.
  • Todos los productos de una categoría o etiqueta: permite crear diferentes plantillas para que los productos de esa categoría o etiqueta específica tengan un diseño propio y diferente al resto.
  • Productos específicos: puedes elegir productos concretos de tu tienda.
Cómo diseñar un producto de WooCommerce con Divi

Cuando hayas marcado una opción, clicas en el botón azul «crear plantilla» (en mi caso he elegido todos los productos).

Ahora, añades un cuerpo personalizado:

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

Y eliges la opción de construir o diseñar uno nuevo:

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

Con este paso ya tienes vinculada la plantilla que vas a crear con Divi con los productos que quieres que tengan ese diseño.

Maquetar una ficha de 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

Cuando tengas el diseño listo, 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

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 para que personalices al máximo las fichas de tu tienda online.
Author
Publisher Name
Max Camuñas
Publisher Logo

37 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
        • Cora

          Hola, yo tengo el mismo problema y no me entero de lo que comentáis ambos.

          Decís que las fichas del producto no se maquetan con Divi pero Max, en su vídeo sí diseña la fichas con Divi y luego subes la ficha a través del generador de temas para generar la plantilla modelo al resto de productos.

          Por favor, os agradecería explicarais los pasos a seguir porque hay un problema de comunicación.

          Un saludo y gracias.

          Responder
        • Cora

          Hola, con respecto a las fichas de woocommerce y al error que también a mí me da, no he entendido vuestras soluciones. Que yo sepa, en el vídeo, Max construye la ficha de producto con DIVI no con el editor estándar. Si lo que queréis es mantener en mismo diseño para todos los productos, una solución fácil es duplicar una ficha y luego editarla.
          Saludos.

          Responder
          • Max Camuñas

            Hola Cora,

            Tengo pendiente actualizar el vídeo porque no está bien explicado del todo.

            Como le comentaba a Macarena, lo que se diseña con el generador de temas de Divi es la plantilla para que todos los productos tengan el mismo diseño y formato. Los productos se editan con el editor por defecto de WordPress, en vez de utilizar Divi.

            Saludos

  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
  10. Alberto

    Hola Max,

    Que guía más completa, me ha encantado.

    Sólo me surge una duda.
    Añado un producto y luego añado un botón «añadir al carrito». Cuando le doy a ese botón, me lleva a una página del producto (midominio.es/index.php/producto/camiseta-s/). Pero yo no quiero eso, porque quiero que siga en la misma página añadiendo más cosas.

    Ya he desactivado la opción «Redirigir a la página del carrito tras añadir productos correctamente» en Ajustes / Productos. Pero me redirige a ese lugar…

    Sabes qué puede pasar?

    Muchísimas gracias de antemano

    Responder
    • Max Camuñas

      Hola Alberto,

      Me alegro de que te haya gustado, muchas gracias.

      ¿Te refieres al botón de compra que hay dentro de la ficha de cada producto (módulo «Woo añadir al carrito») o a un botón «normal» (módulo «botón»)?

      Saludos

      Responder
  11. Alberto

    Hola de nuevo Max,

    Me refiero al botón del módulo de Woo «añadir al carrito». Quiero que cuando la persona que esté comprando siga en la misma página, para seguir añadiendo productos al carrito.

    Muchas gracias de nuevo

    Responder
    • Max Camuñas

      Hola Alberto,

      Si has desactivado la opción de redirigir al carrito, debería añadir el producto al carrito pero no hacer la redirección, sino permanecer en esa ficha y que el usuario pueda volver a la tienda y comprar más productos.

      Habría que ver en tu caso concreto qué está fallando.

      Siento no poder ayudarte sin tener más información 🙁

      Saludos

      Responder
      • Alberto

        Ah vale, pero entonces siempre que compra va a la ficha del producto, no?
        Y tiene que volver a la tienda.

        No existe la opción de que no redirija a ningún sitio y simplemente se quede para seguir añadiendo?

        Saludos

        Responder
        • Max Camuñas

          Creo que me he perdido, Alberto 😅

          ¿Entonces dónde has insertado el módulo «Woo añadir al carrito»?

          El recorrido es el siguiente:

          1) El usuario llega a tu tienda.
          2) Entra a un producto y lo añade al carrito. Aquí tienes 2 opciones por defecto: redirigirle al carrito, o bien que se quede en dicha ficha para volver a la tienda y seguir comprando.

          Saludos

          Responder
  12. Ana

    Hola Max, me ha encantado tu artículo, claro no, cristalino. A mi me ha venido de peras dar contigo porque estoy configurando mi futura tienda online. Concretamente, estoy con las fichas de producto y buscando, para mi suerte, he llegado aquí. La cuestión es que, siguiendo tu explicación, me ha surgido un problema: he creado un producto, lo he publicado, he ido a «Usar el constructor Divi» y, efectivamente me deja editar todo pero cuando guardo los cambios y voy a la vista preliminar me sale la imagen a la derecha pero a la izquierda me sale todo duplicado, arriba los módulos configurados desde el editor de woocommerce/ WordPress y debajo la nueva configuración que hago. No sé si me he explicado bien. Tampoco sé si te ayudará saber que lo estoy haciendo con el tema Astra Pro. Muchas gracias en cualquier caso.

    Responder
    • Max Camuñas

      Hola Ana,

      Si lo estás haciendo con Astra Pro, no sé si te va a servir mi explicación.

      Mi consejo es que edites los productos con el editor por defecto de WordPress, en vez de con Divi.

      Lo que tienes que diseñar con Divi es la plantilla para los productos, pero no las fichas de producto en sí.

      En resumen, Divi para la plantilla de los productos y el editor de WordPress para editar las fichas.

      Espero que consigas solucionarlo.

      Saludos

      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.

¿Necesitas una página web, blog, landing o tienda online?
¡PIDE TU
PRESUPUESTO!

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