Layout de producto en Divi con Theme Builder

La página de producto es donde se decide la venta. Puedes tener la mejor home del mundo, pero si tus productos se muestran con el diseño genérico que WooCommerce trae por defecto, estás perdiendo una oportunidad enorme de diferenciarte. La buena noticia: con el Theme Builder de Divi puedes crear un layout de producto personalizado que se aplica de forma dinámica a todos los productos de tu tienda — lo diseñas una sola vez y funciona para todo el catálogo.

En este tutorial te explico exactamente cómo hacerlo: desde la creación de la plantilla en el Theme Builder hasta los módulos nativos de WooCommerce que Divi pone a tu disposición, los errores típicos al diseñar con contenido dinámico, y cómo asignar diseños distintos a categorías diferentes. Este fue el primer tutorial de nuestra serie sobre tiendas online con Divi y WooCommerce, y sigue siendo uno de los fundamentos que más uso en proyectos reales.

¿Qué es un layout de producto y por qué crearlo con el Theme Builder?

Un layout de producto es una plantilla que define cómo se ve la página individual de cada producto de tu tienda. En lugar de diseñar producto por producto (algo inviable cuando tienes 20, 50 o 500 productos), creas una sola plantilla en el Theme Builder de Divi y el sistema la aplica de forma dinámica: el título, las imágenes, el precio y la descripción de cada producto se cargan automáticamente en el diseño que definiste.

El Theme Builder funciona con un sistema de plantillas asignables: puedes crear layouts para productos, categorías de producto, posts del blog, páginas de archivo y prácticamente cualquier tipo de contenido del sitio. Si nunca lo has usado, te recomiendo primero ver cómo importar y exportar layouts con la biblioteca y el Theme Builder para entender la lógica general del sistema de plantillas.

Consejo: antes de diseñar el layout, ten al menos 2 o 3 productos reales creados en WooCommerce con fotos, precio y descripción. Diseñar una plantilla dinámica sin productos de prueba es diseñar a ciegas — no vas a poder verificar cómo se comporta el diseño con contenido real.

Paso previo: crear el producto en WooCommerce

Crear un producto en WooCommerce es sencillo. Ve a Productos → Añadir nuevo y llena la información de cada campo: nombre, descripción larga, descripción corta, precio, imágenes y categoría. Recuerda que WooCommerce maneja varios tipos de productos — simples, variables, descargables y agrupados — y conviene definir el tipo correcto desde el inicio porque eso determina qué campos se muestran en la página.

Para este tutorial cualquier producto simple con buenas imágenes funciona. Si estás arrancando tu tienda desde cero y quieres dominar los ajustes base (impuestos, envíos, pasarelas de pago, páginas obligatorias), en nuestro curso completo de WooCommerce cubrimos toda la configuración inicial paso a paso antes de entrar al diseño.

Cómo crear el layout de producto en el Theme Builder de Divi

Con los productos creados, el flujo es el siguiente:

1. Ve a Divi → Generador de temas (Theme Builder).
2. Haz clic en Añadir nueva plantilla.
3. En las reglas de asignación, marca Productos → Todos los productos (o una selección específica, como verás más abajo).
4. Haz clic en Crear cuerpo personalizado → Construir cuerpo personalizado.
5. Se abre el constructor visual de Divi, donde diseñas el layout con los módulos de WooCommerce.

La asignación es la parte clave del sistema: una misma instalación puede tener una plantilla para todos los productos y otra distinta para una categoría concreta. La plantilla más específica siempre gana sobre la general.

Los módulos WooCommerce de Divi: tus bloques de construcción

Desde Divi 4.0, el constructor incluye módulos nativos de WooCommerce que solo aparecen cuando tienes el plugin activo. Son los que te permiten armar la página de producto pieza por pieza:

Cada módulo se estiliza igual que cualquier módulo de Divi: tipografía, colores, espaciados, bordes y efectos. Eso significa que puedes hacer que el botón de añadir al carrito combine exactamente con tu identidad visual — y si quieres ir más allá con el botón, tenemos un tutorial dedicado a crear y personalizar el botón de añadir al carrito en una tienda con Divi.

Diseñar con contenido dinámico: lo que debes saber

Aquí viene la particularidad más importante de trabajar con el Theme Builder: dentro del constructor, los módulos muestran contenido de ejemplo, no el contenido real de un producto específico. Esto es lógico — la plantilla se aplicará a muchos productos distintos — pero despista la primera vez.

Mi flujo de trabajo recomendado: diseña en el constructor, guarda, y revisa el resultado en la parte frontal del sitio abriendo 2 o 3 productos reales en otra pestaña. Repite el ciclo hasta que el diseño funcione bien con productos de nombre corto y largo, con una foto y con varias, con precio simple y con descuento. El diseño tiene que aguantar la variabilidad real de tu catálogo, no solo el caso bonito.

🎓 ¿Quieres construir tu tienda online completa con Divi 5 y WooCommerce?
En el curso de tiendas online con Divi 5 y WooCommerce armamos una tienda real de principio a fin: catálogo, página de producto con el Theme Builder, carrito, checkout y optimización para vender. Es el siguiente paso natural después de este tutorial.

Layouts distintos para categorías distintas

Una técnica que eleva el nivel de cualquier tienda: no todos los productos necesitan el mismo diseño. Puedes crear una plantilla general para todos los productos y otra específica para una categoría premium, por ejemplo. En las reglas de asignación de la plantilla, en lugar de "Todos los productos", eliges Productos en categorías específicas y seleccionas la categoría.

Esto también aplica a las páginas de archivo de categoría: el diseño del grid donde se listan los productos de una categoría se controla con otra plantilla del Theme Builder. Tenemos un tutorial completo sobre crear un layout de categorías de productos con el Theme Builder que complementa perfectamente este.

¿Y en Divi 5? Mejor que nunca

Este tutorial nació en la época de Divi 4, pero el flujo es el mismo en Divi 5 — con mejoras importantes de rendimiento y flexibilidad. Los módulos de WooCommerce en Divi 5 se beneficiarón de la nueva arquitectura del constructor: cargan más rápido, el preview es más fiel y las opciones de diseño son más consistentes entre módulos. Si quieres ver las novedades específicas, en nuestras píldoras de Divi 5 sobre los módulos de WooCommerce repasamos los cambios más relevantes.

Errores comunes al crear un layout de producto

Diseñar solo para el caso ideal

El error número uno. El layout se ve perfecto con el producto de prueba (nombre corto, 4 fotos cuadradas, precio redondo) y se rompe con el producto real de nombre larguísimo y una sola foto vertical. Prueba la plantilla con los casos extremos de tu catálogo antes de darla por terminada.

Olvidar la versión móvil

La mayoría de las compras en tiendas pequeñas y medianas llegan desde el celular. Revisa el layout en la vista móvil del constructor y ajusta tamaños de tipografía, orden de columnas y el tamaño del botón de compra — que debe ser cómodo de tocar con el pulgar.

No asignar la plantilla correctamente

Si guardaste la plantilla pero los productos siguen viéndose con el diseño por defecto, casi siempre es porque la regla de asignación quedó vacía o mal configurada. Abre el Theme Builder y verifica que la plantilla diga "Productos: Todos" (o la asignación que quieras) debajo del título.

Sobrecargar la página con módulos innecesarios

Más módulos no es mejor diseño. Una página de producto efectiva necesita: galería, título, precio, botón de compra visible sin scroll, descripción y productos relacionados. Todo lo demás (banners, contadores, sliders decorativos) compite por la atención contra el botón de comprar.

Preguntas frecuentes

¿Necesito saber código para crear un layout de producto con el Theme Builder?

No. Todo el proceso es visual: creas la plantilla, arrastras los módulos de WooCommerce y los estilizas con las opciones de diseño de Divi. El código CSS es opcional para ajustes finos, pero no es requisito.

¿La plantilla del Theme Builder reemplaza la página de producto de WooCommerce?

Visualmente sí: tu layout sustituye al template por defecto del tema. Funcionalmente no pierdes nada — los módulos Woo de Divi usan el mismo motor de WooCommerce (variaciones, stock, carrito), solo cambia la presentación.

¿Puedo usar un layout distinto para un solo producto específico?

Sí. En las reglas de asignación puedes elegir productos individuales. Es útil para un producto estrella que merece una página tipo landing, mientras el resto del catálogo usa la plantilla general.

¿Qué pasa con mi layout si desactivo WooCommerce?

Los módulos Woo desaparecen del constructor y la plantilla queda sin contenido dinámico de producto. El Theme Builder en sí no se rompe, pero esa plantilla deja de tener sentido. Los módulos vuelven a aparecer al reactivar WooCommerce.

Mis recomendaciones finales

1. Diseña la plantilla con 3 productos de prueba abiertos en otra pestaña y revisa el frontend después de cada cambio importante.
2. Prioriza la jerarquía de compra: galería + título + precio + botón visibles sin hacer scroll en desktop y móvil.
3. Usa el módulo de productos relacionados al final — es de los elementos que más ventas cruzadas genera con cero esfuerzo.
4. Crea primero la plantilla general para todos los productos y solo después evalúa si alguna categoría amerita su propio diseño.
5. Guarda tu layout en la biblioteca de Divi cuando esté terminado — lo vas a reutilizar en futuros proyectos de tienda.

Conclusión

Crear un layout de producto con el Theme Builder de Divi es la forma más eficiente de darle identidad propia a tu tienda online: diseñas una vez, aplicas a todo el catálogo, y cada producto nuevo hereda automáticamente el diseño profesional que definiste. Empieza con la plantilla general, pruébala contra productos reales, y de ahí itera hacia layouts por categoría cuando tu catálogo lo pida.

🎓 ¿Listo para montar una tienda online completa que venda?
En el curso de tiendas online con Divi 5 y WooCommerce construimos juntos una tienda real: desde la configuración de WooCommerce hasta los layouts de producto, categoría, carrito y checkout con el Theme Builder. Accede como suscriptor y llévate el proceso completo.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐