19 Nov 2019
46 comentariosSi 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.
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:
Una vez hayas completado toda la información de la ficha de producto, la publicas y así quedaría por defecto:
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:
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.
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:
Y eliges la opción de construir o diseñar uno nuevo:
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.
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:
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:
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.
??? ¡me alegro!
Gracias por pasarte, amigo.
Un abrazo
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.
Hola David,
Sin ver la web me resulta muy difícil poder ayudarte ?
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.
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
Muchas gracias Max.
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
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
¡Muchísimas gracias por el artículo!
Está muy bien explicado y me ha venido perfecto para lo que necesitaba 🙂
Me alegro de que te sea útil, Alicia 🙂
¡Muchas gracias por tu comentario!
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 🙁
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í 😉
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.
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
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.
Lo siento mucho, Alicia.
Pensé que habías conseguido solucionarlo, o eso me pareció entender en el correo que me mandaste 🙁
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.
[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.
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
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.
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.
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
Como se puede corregir desde el generador de tema, el error de modulo de contenido FALTANTE?
GRACIAS
Hola Chris,
Tienes que revisar el diseño en el generador de temas para encontrar dónde está el problema y corregirlo.
Saludos
Mira mi respuesta de más arriba, quizás te sirva, un saludo
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
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
Muchas gracias amigo. Me sirvió mucho su información. Saludos y bendiciones.
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
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
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
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
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
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
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.
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
¡Hola! Muchas gracias por tu explicación es muy clara.
Mi situación es:
1. Creé el producto como lo mostraste.
2. Fui a maquetar mi ficha de producto para que todo me quede igual.
3. Nada queda en orden, quedan textos encima, las estrellas no se ven en la página publicada, mejor dicho cree todos los WOO que necesitaba y me quedo hermoso pero cuando voy a la página publicada no se ve nada de lo que hice.
Saludos.
Hola, me ha gustado mucho el tutorial, gracias por tu tiempo. Pero echo en falta una cosa en la galería de los productos, habría alguna opción para que la galería de los productos aparecieran con las miniaturas en vez de deslizante.
Gracias
Hola, Pere:
Las opciones del módulo Galería Woo de Divi para mostrar las imágenes son dos: rejilla y deslizador.
Puedes cambiarlo en los ajustes del módulo, en el apartado diseño.
Saludos
Hola Max, eso ya lo probé y no es lo que yo busco. Lo tengo hecho con otros temas. Necesito que aparezcan las imágenes en grande(una sóla) y debajo las miniaturas. No se puede hacer con Divi?
Gracias por tu rápida respuesta
Si no te estoy entendiendo mal... en principio sí, Pere.
Para que en el producto aparezca una imagen en grande y debajo las miniaturas restantes debes usar el módulo que se llama "imágenes Woo".
Saludos
Muchas gracias, eso es justamente lo que quería para las imágenes de los productos.
¡Qué bueno, Pere! Me alegro de que te sirva 🙂
Hola Max, me ha ayudado mucho el tutorial.
En mi caso, he creado la plantilla en el generador de temas para aplicarla a todos los productos, pero hay dos imágenes (una guía de tallas y unos logos de sellos ecológicos) que varían según el producto.
¿Tengo que duplicar la plantilla tantas veces como varíe esa imagen y aplicarla a los productos que corresponda?
Es lo único que se me ocurre, pero lo veo engorroso y seguro que se me escapa algo, es mi primera tienda online ><
¡Mil gracias!
¡Hola, Cris!
Me alegro de que te haya sido útil 🙂
Si no he entendido mal, hay una serie de imágenes que cambian según el producto, por lo que se me ocurren dos opciones:
1) Subir esas imágenes en la galería de imágenes del producto, aunque no sé si eso te servirá.
2) Configurar un post type nuevo para esas dos imágenes y añadirlo en la plantilla desde el generador de temas con los campos dinámicos de Divi.
Entiendo que la mejor opción es la segunda, aunque es algo más compleja.
Ya me contarás el resultado.
Saludos