En entornos de comercio electrónico basados en WordPress, es frecuente combinar Elementor con WooCommerce Side Cart Premium de XootiX para mejorar la experiencia de compra. Sin embargo, al activar ambos sidebars simultáneamente, el mini‑cart de Elementor y el Side Cart de XootiX compiten en pantalla, generando confusión. En este artículo SEO optimizado descubrirás cómo:
-
Reemplazar la apertura del sidebar de Elementor por el de XootiX.
-
Desactivar el off‑canvas de Elementor.
-
Ocultar el icono flotante de XootiX que aparece en el pie de página.
¡Sigue leyendo para un tutorial completo!
1. Integración del Side Cart Premium de XootiX en Elementor
Para que tu botón o ícono del carrito en Elementor dispare únicamente el sidebar de XootiX, utiliza la clase que el plugin ya reconoce:
-
Ve a WooCommerce → Side Cart Premium → Settings → Advanced.
-
En Open side cart class, escribe:
-
En Elementor, selecciona tu Menu Cart Widget y, en Avanzado → CSS Classes, añade:
xoo-wsc-cart-trigger
-
Guarda y limpia caché.
Con esto, XootiX escuchará el evento click sobre .xoo-wsc-cart-trigger y abrirá su side cart.
2. Desactivando el sidebar nativo de Elementor
Aunque tu trigger ya abre el side cart de XootiX, es recomendable ocultar el off‑canvas de Elementor para evitar solapamientos:
– Pega este CSS en Apariencia → Personalizar → CSS Adicional o en el CSS global de Elementor.
– Gracias a !important, anulas cualquier regla previa que muestre el sidebar de Elementor.
3. Ocultando el icono flotante de XootiX
El plugin XootiX inyecta por defecto un botón flotante (.xoo-wsc-basket) que abre el carrito al pie de la pantalla. Para ocultarlo completamente:
– Añádelo después de cualquier otro CSS (para que cargue al final).
– Válido en el mismo CSS Adicional o en tu tema hijo.
4. Ejemplo completo de CSS personalizado
Conclusión
Con estos sencillos ajustes habrás logrado:
-
Que el elementor-menu-cart__toggle abra exclusivamente el Side Cart Premium de XootiX.
-
La eliminación del mini-cart de Elementor para evitar duplicidades.
-
La ocultación definitiva del icono flotante de XootiX.
De esta forma optimizas la experiencia de usuario y mantienes un diseño limpio.
¡Comparte y comenta!
Si te resultó útil este tutorial, compártelo con tu comunidad y déjanos tus dudas en los comentarios. Mantente al día con más trucos de WordPress, Elementor y WooCommerce.
