Ad

Moving HTML To A Parent Using JQuery In WordPress - CLOSED

I am creating a WordPress webshop using WooCommerce and the Divi theme.

On PC all is great, but on mobile the theme places my custom mobile cart quantity counter inside the mobile menu dropdown. This makes it not visible until you open the mobile menu. (which uses JavaScript to add display:none to the parent when collapsed.)

Now I'm trying to move the cart quantity counter up in the HTML so it stays visible.

Here is the code that I'm using. But for some reason it's not taking effect.

<script type="text/javascript">
    (function() {
        $('#mobile_menu li.cart_menu').appendTo('#main-header');
    })(jQuery);
</script>

I just want the code snippet to be fired automatically.

I did some testing, and this code snippet does work, but only fires after the add to cart action has been activated:

<script type="text/javascript">
    (function() {
        $('body').on('added_to_cart',
                     $('#mobile_menu li.cart_menu').appendTo('#main-header');
    });
    })(jQuery);
</script>

What am I doing wrong here?

UPDATE:

This script works:

<script type="text/javascript">
    (function($) {
        $(window).on('load', function() {
            $('#mobile_menu li.cart_menu').appendTo('#main-header');
        });
    })(jQuery);
</script>
Ad

Answer

I found the solution.

This script works:

(function($){
    $(window).on('load', function() {
        $('#mobile_menu li.cart_menu').appendTo('#main-header');
    });
})(jQuery);
Ad
source: stackoverflow.com
Ad