En este videotutorial prémium te enseñaremos a crear un mini-carrito de WooCommerce en el menú de Divi. Esta nueva opción mejorará la experiencia de usuario al agregar productos al carrito en tu tienda online, y lo mejor es que estará completamente integrado con Divi.

Esta funcionalidad la lograremos usando el plugin Divi Mini Cart que compramos directamente en el Marketplace de Divi, y que por supuesto tendrás disponible para descarga desde la parte inferior de este tutorial.

Puedes ver la DEMO aquí:

Objetivo de tutorial:

La idea es mejorar el funcionamiento básico del carrito que viene con el menú de Divi, que como sabes, es bastante básico y pobre. Para ello, usaremos un plugin premium que permitirá al usuario visualizar los productos que va añadiendo al carrito desde el menú de Divi de una manera dinámica.

Divi Mini Cart es una gran herramienta para mejorar la experiencia de compra de tus clientes al hacer que el carrito de compras de tu tienda sea más accesible, dinámico e interactivo.

Resultado:

Al final tendremos un resultado como este:

Este es un tutorial pedido por uno de nuestros suscriptores, y como siempre, buscamos complacer y ayudar a toda nuestra comunidad.

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 mini-carrito en el menú es clave para tu tienda WooCommerce?

El mini-carrito (mini cart) en el menú principal de tu tienda es una de esas micro-mejoras de UX que tiene un impacto desproporcionado en conversión. Sustituye al ícono pequeño de carrito que aparece «muerto» en el header por un widget interactivo que muestra los productos añadidos al pasar el cursor encima.

¿Qué cambia para tu cliente?

• Feedback inmediato al añadir productos: el cliente ve que el producto efectivamente se añadió, sin tener que ir hasta /cart/ a verificar.
• Recordatorio constante del carrito: el ícono actualizado con el número de items mantiene presente la intención de compra.
• Acceso rápido a checkout: desde el mini-carrito, un click directo a /checkout/ acorta el funnel. Si quieres dominar todas las técnicas de optimización de tienda online, mira nuestro curso completo de WooCommerce con Divi.
• Previsualización del total: ver el subtotal sin abandonar la página de producto reduce la sorpresa al checkout.

El plugin que usamos es premium y se integra de forma nativa con el menú de Divi, agregando un módulo específico (Divi Menu Card) que reemplaza el comportamiento estático del ícono de carrito por uno interactivo similar al de tiendas grandes como Amazon o Mercado Libre.

Pasos clave para configurar el mini-carrito

1. Instala el plugin (link en la zona prémium de este post). Plugins → Subir plugin → Activar.
2. Edita tu header en Divi Theme Builder. Si todavía no tienes un header global con Theme Builder, créalo — es lo más limpio para tener un menú único en todo el sitio.
3. Añade el módulo Divi Menu Card al header. En la posición donde quieres el carrito (típicamente al final del menú principal, alineado a la derecha) → añade el módulo del plugin → ya carga con un ícono de carrito por defecto.
4. Personaliza el ícono del carrito. En la pestaña Content del módulo puedes elegir entre íconos prediseñados o subir uno custom desde la biblioteca de medios. Mantén el ícono coherente con el estilo del sitio.
5. Configura el comportamiento del hover. En la pestaña de configuración del mini-carrito: Display on Hover activado, Hover Delay de 600ms (evita que se despliegue al rozar el cursor accidentalmente), y duración de transición de 300-500ms.
6. Define el contenido del mini-carrito. El plugin muestra automáticamente los productos en el carrito de WooCommerce — solo tienes que ajustar qué información se muestra: imagen, nombre, cantidad, precio, subtotal, botón «Ver carrito» y botón «Checkout».
7. Personaliza colores y tipografía. En la pestaña Design ajustas todo el styling: color de fondo del dropdown, color del texto, color del subtotal destacado, hover de los productos. Mantén consistencia con el resto del sitio.
8. Verifica el responsive. En mobile, el hover no aplica — el módulo se convierte en click-to-toggle. Comprueba que el dropdown se vea legible en pantallas pequeñas y que cerrarlo (segundo tap) funcione bien.

Tips para que el mini-carrito convierta

• Muestra el contador de items siempre: el badge con el número de productos visible incluso cuando el carrito está vacío (con «0») refuerza la presencia del elemento.
• Incluye el subtotal destacado: el visitante quiere saber cuánto va gastando. Subtotal grande y en color de marca convierte mejor que solo lista de productos.
• Botón principal «Checkout» más prominente que «Ver carrito»: la acción principal es ir a checkout, no a la página intermedia de carrito. El botón secundario en color neutro guía al usuario.
• Imágenes de productos pequeñas pero visibles: 50-60px de ancho es suficiente para que el cliente reconozca el producto sin saturar el dropdown.
• Permite eliminar items desde el mini-carrito: si el usuario se arrepiente, puede quitar el producto sin tener que ir a /cart/. Reduce fricción. Para complementar la experiencia de tienda, agrega iconos de wishlist y quick view en las fichas de producto.
• Animación sutil al añadir un producto: un bounce ligero del ícono o badge del carrito da feedback visual sin ser molesto.

Preguntas frecuentes

¿Funciona con Divi 5?

Sí. El plugin se ha actualizado para Divi 5 y funciona dentro del nuevo Theme Builder sin cambios en el flow de configuración. Si actualizas Divi a la versión 5 con el plugin instalado, la configuración existente se mantiene.

¿Es compatible con todos los plugins de WooCommerce?

Funciona con la mayoría: WooCommerce Subscriptions, productos variables, cupones, multi-currency. Si tienes plugins muy específicos de eCommerce (ej. una pasarela de pago muy custom), siempre vale probar en staging antes de subir a producción.

¿Afecta la velocidad de carga?

El plugin es ligero — añade pocos KB de JavaScript que se carga solo en páginas con el módulo activo. Si tienes problemas de velocidad, no es por el mini-carrito. Para optimización general mira nuestro curso de Optimización de Velocidad con Divi.

¿Puedo poner el mini-carrito en una posición diferente al header?

Sí. Aunque lo más común es ponerlo en el header del Theme Builder, técnicamente puedes insertar el módulo Divi Menu Card en cualquier sección del sitio (footer, sidebar). Pero la posición de header es la que más conversión genera porque siempre está visible.

¿Hay alternativas gratuitas?

Existen widgets nativos de WooCommerce con mini-carrito básico, pero ninguno se integra al Divi Builder con la misma fluidez. El comportamiento de hover, la personalización completa y la integración con el Theme Builder de Divi son lo que justifica el plugin premium.

¿Listo para mejorar la UX de tu tienda?

El plugin con todas las opciones de configuración avanzada está disponible en la zona prémium más abajo. Si todavía no eres prémium en UXDivi, empieza tu suscripción acá y desbloquea cientos de recursos descargables. Si quieres aprender a construir tiendas online completas con Divi 5 + WooCommerce, mira nuestro curso de Tiendas Online. Y para cerrar el ciclo de mejoras de tienda, complementa con guías sobre carruseles de productos en WooCommerce + Divi y filtros dinámicos para tu tienda.

Recursos, Snippets y descargas de este tutorial: