Popup despues de agregar al carrito con Elementor

En este artículo te enseñaré a agregar una ventana emergente luego de agregar al carrito con Woocommerce y Elementor. Así podrás dar la opción a tus usuarios a pagar de inmediato o seguir comprando. Quedaría similar a esto:

El primer paso es activar la opción de WooCommerce > Ajustes > Productos: Activar botones AJAX de añadir al carrito en los archivos, esto hará que el botón de los listados de productos funcione con AJAX.

Luego creamos nuestra plantilla de PoPup. También puedes descargar la del ejemplo:

Luego de tener la plantilla creada vamos a anotar el ID de la plantilla que encontramos en el listado de plantillas. Copiamos ese ID, ya que lo usaremos en un código.

Nos dirigimos a Elementor > Código personalizado y agregamos un nuevo fragmento:

Dentro del fragmento asignamos la ubicación en «</body> – Fin» y pegamos el siguiente código:

<script> 
jQuery(document).ready(function($) {
    // Verifica si estamos en el editor de Elementor
    if (typeof elementorFrontend !== 'undefined' && elementorFrontend.isEditMode()) {
        return; // No ejecutar el script en el editor de Elementor
    }

    // Escucha el evento de agregar al carrito
    $(document.body).on('added_to_cart', function() {
        // Reemplaza '23256' con el ID de tu popup
        var popupId = 'XXXXX';

        // Abre el popup cuando un producto se agrega al carrito
        elementorProFrontend.modules.popup.showPopup({ id: popupId });
    });
});
</script>

Recuerda reemplazar «XXXXX» con el ID de tu ventana emergente de Elementor. Debe quedar de esta forma:

Este script utiliza jQuery para ejecutar una función cuando el documento está listo. Aquí te explico cómo funciona:

1. Verificación del Modo de Edición de Elementor:
   • El script primero verifica si estamos en el editor de Elementor. Si elementorFrontend está definido y elementorFrontend.isEditMode() devuelve true, el script se detiene. Esto asegura que el script no se ejecute mientras estás editando la página con Elementor.
2. Evento de Agregar al Carrito:
   • El script escucha el evento added_to_cart en el cuerpo del documento. Este evento se dispara cuando un producto se agrega al carrito en WooCommerce.
3. Mostrar Popup:
   • Cuando se detecta el evento added_to_cart, el script utiliza elementorProFrontend.modules.popup.showPopup()

Y listo. Ya tienes un PoPup siempre que añadas un producto al carrito desde el listado de productos.