I’m using the Elementor Menu Cart Widget in my header and by default it opens the WooCommerce mini cart on click. What I’m trying to do is to redirect to the cart page when clicking the widget instead of having the mini cart opening on the side and apparently there is no way of doing it on Elementor settings.

I found a JS solution that prevent the default behavior but it doesn’t always work. I’m not sure if it’s a theme, Elementor or WooCommerce functionality.

This is the code that I paste in functions.php :

add_action('wp_footer', 'redirect_menu_cart_to_cart_page');

function redirect_menu_cart_to_cart_page() {

    // Get the URL of the cart page
    $cart_page_url = wc_get_cart_url();
?>

<script>

    document.addEventListener('DOMContentLoaded', function() {

        let menuCartLink = document.querySelector('#elementor-menu-cart__toggle_button');

        if (menuCartLink) {

            menuCartLink.addEventListener('click', function(event) {
                event.preventDefault();
                window.location.href = '<?php echo esc_url($cart_page_url); ?>';
                event.stopPropagation();
            });
       }
   });

</script>

<?php
}

I tried to prevent the default click behavior but it doesn’t work all the time.