En una tienda online, cada clic extra entre "quiero esto" y "lo compré" es una oportunidad de perder la venta. Un carrito flotante resuelve parte de ese problema: mantiene el carrito siempre visible y accesible mientras el usuario navega, sin que tenga que subir al header o ir a otra página. En este tutorial te muestro cómo crear un carrito flotante de WooCommerce en Divi usando un plugin que se integra perfecto con tu tienda y te da control total sobre el diseño.
El plugin que uso es XT WooCommerce Floating Cart, de Exploded Themes. Tiene una versión gratuita en el repositorio oficial de WordPress y una versión premium con muchas más opciones de personalización. En este tutorial trabajo con la versión premium porque es la que permite ajustar a fondo el diseño del carrito flotante, pero la base del flujo funciona también con la gratuita.
¿Qué es un carrito flotante y por qué mejora las ventas?
Un carrito flotante es un botón o panel que permanece fijo en la pantalla (normalmente en una esquina) mientras el usuario navega por la tienda. Al hacer clic, despliega el contenido del carrito sin recargar la página ni sacar al usuario del flujo de compra. Esto reduce la fricción: el comprador siempre sabe qué lleva y puede ir al checkout en cualquier momento. En tiendas con catálogos grandes, donde el usuario va agregando productos mientras explora, esta visibilidad constante del carrito tiene un impacto real en la conversión. Si estás construyendo tu tienda con Divi, este tutorial complementa todo lo del Curso de Tiendas Online con Divi 5 y WooCommerce.
Paso 1: Instala XT WooCommerce Floating Cart
Para la versión gratuita, ve a Plugins → Añadir nuevo y busca "XT Floating Cart" o "WooCommerce Floating Cart Lite". Instálalo y actívalo. Si tienes la versión premium, súbela desde Plugins → Subir plugin con el archivo ZIP. Una vez activo, el plugin añade un menú propio en el panel donde configuras todo el comportamiento del carrito.
Consejo: antes de comprar la versión premium, prueba la gratuita para confirmar que el plugin encaja con tu tema y tu flujo de tienda. La versión lite ya muestra el carrito flotante básico — así verificas la compatibilidad antes de invertir en la premium para las opciones de diseño avanzadas.
Paso 2: Configura la posición y el comportamiento
En la configuración del plugin defines dónde aparece el carrito flotante: esquina inferior derecha, inferior izquierda, o el lado que prefieras. También configuras cuándo se muestra — siempre visible, o solo cuando hay productos en el carrito. Mi recomendación es mostrarlo siempre que haya al menos un producto, para que no distraiga cuando el carrito está vacío pero esté presente apenas el usuario agrega algo.
Otra opción importante es el comportamiento al hacer clic: que despliegue un panel lateral con el detalle del carrito, o que lleve directo a la página de carrito. El panel lateral (slide-in) es la mejor experiencia porque mantiene al usuario en la misma página.
🎓 ¿Quieres construir una tienda WooCommerce que venda de verdad?
En uxdivi.com/cursos tenemos el Curso de Tiendas Online con Divi 5 y WooCommerce donde cubrimos la experiencia de compra completa, desde el catálogo hasta el checkout optimizado. Accede como suscriptor y construye una tienda enfocada en convertir.
Paso 3: Personaliza el diseño del carrito flotante
Aquí es donde la versión premium brilla. Puedes ajustar los colores del botón flotante y del panel para que combinen con tu marca, el ícono que se muestra, el tamaño, los textos, y los estilos del botón de checkout dentro del panel. La idea es que el carrito flotante no se vea como un elemento "pegado" de un plugin genérico, sino como parte natural del diseño de tu tienda.
Cuida especialmente el botón de "Finalizar compra" dentro del panel: debe destacar con un color de acción claro, porque es el siguiente paso que quieres que el usuario tome. También puedes mostrar el subtotal y el contador de productos en el botón flotante para reforzar la información.
Paso 4: Prueba el flujo completo en móvil
El carrito flotante es especialmente valioso en móvil, donde el header con el ícono de carrito suele quedar oculto al hacer scroll. Verifica que el botón flotante no tape contenido importante ni botones de "añadir al carrito", y que el panel lateral se abra correctamente en pantallas pequeñas. Prueba todo el recorrido: agregar producto, abrir el carrito flotante, modificar cantidades, e ir al checkout.
Consejo: combina el carrito flotante con otras mejoras de carrito para una experiencia coherente. Por ejemplo, puedes cambiar el ícono del carrito de WooCommerce en Divi para que el del header combine con el flotante, o personalizar el texto de "Añadir al carrito" para reforzar la voz de tu marca en toda la tienda.
Preguntas frecuentes sobre el carrito flotante en WooCommerce
¿El carrito flotante ralentiza la tienda?
Un plugin bien construido como XT WooCommerce Floating Cart tiene un impacto mínimo en el rendimiento, ya que carga el contenido del carrito con AJAX solo cuando el usuario lo abre. Aun así, como con cualquier plugin, conviene medir la velocidad antes y después con una herramienta como GTmetrix.
¿Funciona con cualquier tema o solo con Divi?
XT WooCommerce Floating Cart funciona con cualquier tema de WordPress que use WooCommerce, no solo con Divi. La integración es a nivel de WooCommerce, así que el carrito flotante aparece independientemente del tema. Con Divi se ve especialmente bien porque puedes alinear los colores con tu sistema de diseño.
¿Puedo mostrar el carrito flotante solo en la tienda y no en el blog?
Sí, en la configuración del plugin puedes definir en qué páginas o tipos de contenido se muestra. Lo habitual es mostrarlo en las páginas de tienda, producto, categoría y carrito, y ocultarlo en el blog o en páginas informativas.
¿La versión gratuita es suficiente?
Para un carrito flotante funcional y básico, sí. La versión premium aporta el control fino sobre el diseño (colores, estilos, textos, animaciones), que es lo que necesitas si quieres que combine perfecto con tu marca. Depende de cuánto te importe el detalle visual.
Conclusión
Un carrito flotante es una de esas mejoras de tienda con buena relación esfuerzo-impacto: se configura en minutos y mantiene el carrito siempre a la vista, reduciendo la fricción en el camino a la compra. Con XT WooCommerce Floating Cart en Divi tienes el control de diseño necesario para que se integre con tu marca en lugar de verse como un añadido genérico. Configura la posición, personaliza el diseño, prueba en móvil, y tendrás una tienda con una experiencia de compra más fluida.
🎓 ¿Quieres dominar WooCommerce y Divi para crear tiendas que convierten?
En uxdivi.com/cursos tienes el Curso de Tiendas Online con Divi 5 y WooCommerce donde construimos una tienda completa optimizada para vender, con todas las mejoras de experiencia de compra. Accede como suscriptor y lleva tu tienda al siguiente nivel.
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 ⭐
Comentarios
2 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Hola!! Genial el tutorial.
Quería hacerles una pregunta.
¿Cómo le podemos añadir el botón vaciar carrito a la ventana flotante?
Si no es en este, ¿hay otro en el que se pueda hacer? He probado varios pero no lo logro.
Muchas gracias.
Que tal Esperanza, me parece que esto ya sería con código, debido a que son configuraciones que no tiene el plugin por defecto.