Site Overlay

Prevent the CheckoutWC’s Side Cart from opening when editing a page with Elementor.

There is a problem with Elementor and CheckoutWC, and that is, when you try to edit any page in the Elementor editor, and you save a change, the CheckoutWC’s Side Cart will auto-open for some strange reason.

This problem is somewhat complex to solve as essentially, the Elementor editor lives in its own environment. This means that if you try to run a WordPress hook from the WordPress core or a third-party plugin, it may or may not work.

I found a workaround to get rid of the Side Cart auto opening when editing a page with Elementor.

It is not the most elegant solution, but hey, it works!

The logic behind it is simple: Detect if the Elementor editor exists on the current page, with JavaScript and CSS selectors. If it does, hide the Side Cart’s floating icon, drawer element, and the background overlay.

See the code below:

function custom_inline_script_for_elementor() {
    // Check if we are in the admin area and return early if we are not
    if (is_admin()) {
        return;
    }

    ?>
    <script>
    (function() {
        var checkAndHide = function() {
            if (document.body.classList.contains('elementor-editor-active')) {
                var elementsToHideIds = ['cfw-side-cart-floating-button', 'cfw-side-cart-overlay', 'cfw-side-cart'];
                elementsToHideIds.forEach(function(id) {
                    var elementToHide = document.getElementById(id);
                    if (elementToHide) {
                        elementToHide.style.display = 'none';
                    }
                });
            }
        };

        // Check immediately
        checkAndHide();

        // Then check repeatedly for a few seconds
        var intervalId = setInterval(checkAndHide, 500);

        // Stop checking after 5 seconds
        setTimeout(function() {
            clearInterval(intervalId);
        }, 5000);
    })();
    </script>
    <?php
}
add_action('wp_footer', 'custom_inline_script_for_elementor');

Leave a Reply

Your email address will not be published. Required fields are marked *