Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Moving HTML to a parent using jQuery in WordPress – CLOSED – Woocommerce

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution.

    This script works:

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

  2. 0

    Put your code to the ready function like this example:

    $(document).ready(function() {
    (function() {
        $('#mobile_menu li.cart_menu').appendTo('#main-header');
    })(jQuery);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search