Si estás construyendo una tienda online con Divi 5 y quieres mostrar tus productos de una forma dinámica, atractiva y optimizada para todos los dispositivos, estás en el lugar correcto. En este tutorial te voy a enseñar paso a paso cómo crear un carrusel de productos usando dos de los módulos más poderosos que trae Divi 5: el Loop Builder y el módulo de Carrusel nativo. La combinación de ambos es exactamente lo que necesitas para llevar tu tienda WooCommerce al siguiente nivel.

¿Por qué usar el Loop Builder junto al módulo de Carrusel en Divi 5?

Antes de entrar en materia, quiero explicarte brevemente por qué esta combinación es tan potente. El Loop Builder te permite mostrar contenido dinámico —en este caso, productos de WooCommerce— de forma automática, sin tener que agregar cada tarjeta manualmente. Por su parte, el módulo de Carrusel de Divi 5 te da el contenedor perfecto para presentar ese contenido en formato deslizante, con soporte responsive nativo y opciones de personalización visual muy completas.

Juntos, logran algo que antes requería plugins de terceros o configuraciones complicadas: un carrusel de productos completamente dinámico, bonito y optimizado para móvil.

Consejo: Antes de comenzar, asegúrate de tener Divi 5 activo en tu instalación de WordPress y WooCommerce instalado con al menos algunos productos publicados. Sin productos, el loop no tendrá contenido que mostrar.

Paso 1: Preparar la sección donde irá el carrusel

Lo primero que hago es abrir el constructor visual de Divi 5 en la página donde quiero agregar el carrusel. En mi caso, trabajo sobre una tienda online de productos de impresión personalizada que construimos en nuestro curso de tienda online con Divi 5, disponible en la plataforma.

Para no empezar desde cero, duplico una sección existente que ya tiene el diseño base que quiero conservar —encabezado, espaciado, tipografía— y la muevo a la posición correcta dentro del layout. Cambio el título de la sección por algo como Productos Destacados o Stellar Products, según el estilo de tu marca.

Después, elimino el módulo de productos estático que venía en esa sección, porque lo vamos a reemplazar con nuestra combinación dinámica.

Paso 2: Agregar el módulo de Carrusel de Divi 5

Con la sección lista, agrego un nuevo módulo. El que nos interesa se llama Group Carousel (o Módulo de Carrusel de Divi 5). Este módulo es el contenedor principal de todo nuestro carrusel.

Te recomiendo abrir el panel de capas (Layers) desde el constructor visual para que puedas ir viendo la estructura mientras trabajas. Así es mucho más fácil entender qué elemento está dentro de cuál.

Al agregar el Group Carousel, verás que se crea automáticamente una nueva capa llamada Carousel Group. Esa es la capa clave donde vamos a trabajar el loop.

Paso 3: Crear el módulo de grupo dentro del Carousel Group

Dentro del Carousel Group, agrego un módulo de Grupo. Este módulo de grupo será la tarjeta de producto que Divi va a replicar automáticamente para cada producto de tu tienda. Por ahora, agrego solo un texto dentro para que el módulo quede activo y lo podamos ver en pantalla.

Consejo: Piensa en este módulo de grupo como el “molde” de tus tarjetas. Todo lo que agregues aquí se va a repetir dinámicamente para cada producto. Por eso, el diseño que hagas aquí es el diseño que verás en todos los productos.

Paso 4: Activar el Loop en el Carousel Group

Este es el paso más importante de todo el proceso. Selecciono el Carousel Group (no el módulo de grupo interior, sino el contenedor del carrusel) y voy a sus opciones. Busco la pestaña o sección llamada Loop y la activo.

Al activar el loop, Divi me pide que elija el tipo de contenido que quiero iterar. Selecciono Productos (WooCommerce). Las demás opciones las dejo por defecto por ahora, ya que las ajustaré más adelante.

Con esto activado, el carrusel ya sabe que debe mostrar productos dinámicamente. Ahora solo falta decirle qué información de cada producto mostrar.

Paso 5: Agregar contenido dinámico a la tarjeta

Voy al módulo de texto que tenía dentro del módulo de grupo y en vez de escribir texto estático, le digo que muestre contenido dinámico. Al estar dentro de un loop de productos, aparece la sección Loop Dynamic Content, donde puedo elegir entre opciones como:

• Título del producto
• Precio regular
• Precio en oferta
• Descripción corta
• Imagen destacada del producto
• SKU, ID, reviews, entre otros

Primero selecciono Product Title para el primer texto. Luego duplico ese módulo de texto y al duplicado le asigno Regular Price. Después agrego un módulo de Imagen al grupo y le digo que muestre dinámicamente el Loop Product Feature Image, es decir, la imagen principal del producto.

Para que el título funcione como encabezado semántico correcto, en el campo Before del módulo de texto escribo <h3> y en el campo After escribo </h3>. Esto le da estructura SEO correcta a cada tarjeta sin necesidad de configuraciones adicionales.

Paso 6: Diseño y personalización de las tarjetas

Una vez que los datos dinámicos están conectados, empiezo a personalizar el diseño visual de la tarjeta:

• Al texto del precio le asigno un tamaño de fuente de 16px y peso semibold
• En el módulo de grupo activo la alineación centrada tanto en el eje horizontal como vertical
• Agrego un gap vertical de 10px entre elementos del grupo para que respiren visualmente
• Al precio le aplico un margin-top negativo de -10px para acercarlo visualmente al título
• Al Carousel Group le agrego un padding right de 20px para generar el espaciado entre tarjetas

Para el enlace, voy al módulo de grupo, pestaña Link, inserto contenido dinámico y selecciono Loop Product Link URL. Con esto, al hacer clic en cualquier parte de la tarjeta, el usuario es llevado directamente a la página del producto.

🎓 ¿Quieres profundizar en esto? En nuestro Curso de Tienda Online con Divi 5 en uxdivi.com/cursos aprenderás a construir desde cero una tienda completa con WooCommerce y Divi 5: menús personalizados, filtros dinámicos con interacciones, páginas de producto optimizadas y mucho más. Este contenido está disponible para suscriptores de la plataforma. ¡Suscríbete y lleva tu tienda al siguiente nivel!

Paso 7: Configurar el módulo de Carrusel

Ahora voy al módulo de Carrusel como tal y en Carousel Settings configuro cuántos slides quiero mostrar. En este caso configuro 4 productos visibles en escritorio. También activo la rotación automática cada 2 segundos para que el carrusel se mueva solo.

En cuanto a los elementos visuales:

• Puedo mostrar u ocultar los dots de navegación inferior
• Puedo mostrar u ocultar las flechas laterales y personalizar sus íconos
• Las flechas las configuro en modo Outside para escritorio
• En la sección Groups puedo agregar un borde a las tarjetas para darles un look más definido

Paso 8: Hacer el carrusel responsive

Una de las cosas que más me gusta de este módulo es lo fácil que es ajustarlo para tablet y móvil. Desde el constructor visual, cambio la vista a Tablet y en los settings del carrusel le digo que muestre 3 productos. Luego cambio a Móvil y configuro 2 productos visibles.

Para las flechas en dispositivos móviles, las configuro en modo Inside (dentro del carrusel) o directamente las oculto, ya que en pantallas pequeñas el swipe táctil es suficiente para navegar y las flechas suelen estorbar visualmente.

🎓 ¿Quieres aprender más sobre diseño responsive en Divi 5? En uxdivi.com/cursos tenemos contenido premium donde te mostramos cómo trabajar el diseño responsive de forma profesional en Divi 5, asegurando que tu sitio se vea perfecto en cualquier dispositivo. ¡Accede como suscriptor y domina el diseño responsive!

Recomendaciones finales

Después de trabajar con esta funcionalidad, estas son mis recomendaciones clave para que tu carrusel de productos quede impecable:

Mantén el diseño de la tarjeta limpio y simple. No sobrecargues el loop con demasiados módulos, ya que esto puede afectar el rendimiento. Con la imagen, el título, el precio y el enlace al producto tienes más que suficiente para una tarjeta efectiva.

Si tus productos tienen variaciones, considera no agregar el botón de Add to Cart directamente en la tarjeta. Es mejor llevar al usuario a la página del producto donde pueda seleccionar la variación correctamente, como hago en el ejemplo del tutorial.

Prueba siempre el carrusel en dispositivos reales, no solo en el simulador del constructor. Los comportamientos táctiles en móvil pueden variar y es importante validar la experiencia de usuario final.

Finalmente, aprovecha el poder del Loop Builder más allá del carrusel. Este mismo principio lo puedes aplicar para crear grids de productos, listas de posts, portfolios y mucho más dentro de Divi 5.