En este videotutorial prémium te enseñaremos como crear un carrusel de productos totalmente personalizable con WooCommerce y Divi. Lo haremos con ayuda del plugin prémium Divi Product Carousel Module.

Este es un tutorial pedido por nuestros suscriptores y acá lo traemos. En esta ocasión te mostraremos todas las capacidades que tiene el plugin prémium Divi Product Carousel Module de la gente de Divi Gear.

Este plugin te permitirá crear un carrusel de productos de Woocommerce con el Divi Builder de manera nativa, y de manera sencilla. Podrás personalizar todos los aspectos del carrusel de productos de manera sencilla con todas las opciones de personalización que viene por defecto con Divi.

Acá puedes ver el resultado de los ejemplos que usamos en este tutorial:

Ejemplo de carrusel de productos con Woo y Divi:

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 ⭐

¿Por qué un carrusel de productos en tu tienda WooCommerce + Divi?

Un carrusel (slider) de productos es una de las formas más efectivas de mostrar destacados, novedades, ofertas o mejores vendidos en una tienda WooCommerce + Divi. Bien implementado, cumple varias funciones a la vez:

• Aumenta la conversión en home: el visitante ve productos reales (con precio y botón de añadir al carrito) sin tener que hacer scroll por todo el catálogo.
• Optimiza el espacio vertical: 6-12 productos en un carrusel ocupan menos que un grid extendido, ideal para mobile. Si trabajas con Divi 5, considera además el módulo nativo del carrusel Loop de productos.
• Mejora la prueba social: si activas el módulo con ratings y reviews, los productos con más estrellas captan la atención al instante.
• Permite categorizar la promoción: un carrusel para «Más vendidos», otro para «Novedades», otro para «Ofertas». Cada uno con su filtro. Para complementar con filtros dinámicos en la página de tienda y agregar iconos de wishlist y quick view, tienes guías específicas en el blog.

El plugin que recomendamos para esto es DiviGear: trae un módulo nativo dentro del Divi Builder específicamente diseñado para carruseles de WooCommerce, con todas las opciones que necesitas sin tener que tocar código.

Pasos clave para crear tu carrusel

1. Instala el plugin DiviGear. El .zip está en la zona prémium de este post. Plugins → Subir plugin → Activar.
2. Edita la página con Divi Builder y añade un nuevo módulo. En la lista busca «DiviGear Product Carousel» o similar — selecciónalo.
3. Configura la fuente de productos. En la pestaña Content del módulo eliges: todos los productos, una categoría específica (ej. «Más vendidos»), o un listado custom de IDs. Para una home, «Featured» o «Best Sellers» suele ser lo más útil.
4. Define cuántos slides se ven a la vez. En Design → Slider Settings: 4 visible en desktop, 2-3 en tablet, 1 en mobile suele ser lo óptimo. Más de 4 hace que cada producto se vea muy chico.
5. Ajusta el Custom Item Spacing. 30 píxeles entre productos da respiro visual sin perder densidad. Menos de 15 se ve apretado, más de 50 desconecta los elementos.
6. Configura autoplay con cuidado. El autoplay automático puede ser intrusivo. Si lo activas, usa duración alta (5-7 segundos por slide) y deshabilítalo en mobile. La transición de 500ms por defecto está bien — más rápida marea, más lenta se siente lenta.
7. Personaliza el diseño visual. En Design configuras: color de las review stars, color de los dots y arrows del carrusel, dot estilo (circular o cuadrado), color del dot activo, hover effects. Mantén consistencia con el resto del sitio Divi.
8. Verifica el botón «Añadir al carrito». El módulo trae botón nativo que dispara la acción de WooCommerce sin recargar la página. Prueba en una ventana incógnito que efectivamente añada al carrito y muestre el feedback correcto.

Tips para que el carrusel rinda en tu tienda

• Carga lazy de las imágenes: si el carrusel está debajo del fold, asegúrate de que las imágenes de productos no carguen hasta que el usuario haga scroll. Esto protege los Core Web Vitals.
• Optimiza las imágenes de producto: 800x800px en formato WebP es el balance ideal. Imágenes más grandes ralentizan la página sin aportar nada visible.
• Centra el slide en mobile si pones uno solo visible: la opción Center Slide es útil cuando muestras un producto a la vez en mobile — visualmente se ve mucho mejor.
• No abuses: 1-2 carruseles en home, máximo. Más de eso satura visualmente y los Core Web Vitals empeoran.
• Si tienes pocos productos (menos de 8), usa un grid en vez de carrusel. El carrusel necesita al menos 6-8 ítems para que el slide tenga sentido visual.

Preguntas frecuentes

¿Funciona DiviGear con Divi 5?

Sí. El plugin se ha actualizado para Divi 5 y los módulos siguen funcionando dentro del nuevo Divi Builder. Si actualizas Divi a la versión 5 con el plugin instalado, los carruseles existentes se mantienen sin cambios.

¿El carrusel es accesible para teclado y lectores de pantalla?

El módulo genera HTML semántico estándar y los controles del carrusel responden a teclado (flechas izquierda/derecha). Para reforzar accesibilidad, asegúrate de que las imágenes de productos tengan alt descriptivo y de que el botón «Añadir al carrito» tenga un label claro.

¿Puedo combinarlo con un carrusel de testimonios?

Sí, DiviGear trae varios módulos de carrusel (productos, testimonios, posts, imágenes). Puedes alternar tipos en una misma página sin conflictos.

¿Y si quiero filtrar por una variación específica?

Por defecto el módulo muestra el producto padre. Si tu tienda usa productos variables (tallas, colores), considera mostrar la variación más popular como producto destacado, o crear productos simples paralelos para los carruseles para máximo control.

¿Hay alternativas gratuitas a DiviGear?

Existen plugins gratuitos como WooCommerce Product Carousel, pero ninguno se integra al Divi Builder con la misma profundidad. Si solo vas a hacer un carrusel puntual, una opción gratuita alcanza; si vas a iterar y construir varias tiendas Divi, DiviGear amortiza rápido.

¿Listo para crear tu carrusel?

El plugin DiviGear está disponible en la zona prémium de este post. Si todavía no eres prémium en UXDivi, empieza tu suscripción acá y desbloquea cientos de recursos descargables — desde $10 USD al mes. Si quieres aprender a construir tiendas online completas con Divi 5 + WooCommerce, mira nuestro curso completo de Tiendas Online y el curso completo de WooCommerce con Divi.

Recursos