Woocommerce: custom jquery event after added to cart

Question

I'm trying (in archive) handle event after some product was added to cart (1 action on picture), I want catch that moment and update "Total number of products" (3 action on picture) of my mini cart in navigation menu. (With action 2 is all ok)

Not working for me with second code:

$( document.body ).on( 'added_to_cart', function(){
console.log('added_to_cart');
});

My custom code inited after when woocommerce js files are loaded.

If I will edit add-to-cart.min.js core file and insert my own logic, all is working. What problem is?

Solution

Update (related to your jQuery script)

In Wordpress for jQuery, you need first to use jQuery instead of the alias $ and you should need to specify the "ready" state to allow the DOM to be completely loaded before. I have tested the code below and it works triggering the "added_to_cart" JS event in the browser console, once a product is added to cart:

add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
    if ( is_shop() || is_product_category() || is_product_tag() ): // Only for archives pages
        ?>
            <script type="text/javascript">
                // Ready state
                (function($){ 

                    $( document.body ).on( 'added_to_cart', function(){
                        console.log('EVENT: added_to_cart');
                    });

                })(jQuery); // "jQuery" Working with WP (added the $ alias as argument)
            </script>
        <?php
    endif;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

It display the string "added_to_cart" in the browser console once a product has been added to cart… so it's just working this way as you are expecting.

---

Original answer:

The mini-cart update/refresh doesn't really need jQuery but custom php function hooked in dedicated woocommerce_add_to_cart_fragments action hook, like in this examples, where the icon count and the content are refreshed each time a product is added to cart.

Refreshing the cart icon count example:

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_mini_cart_refresh_number');
function wc_mini_cart_refresh_number($fragments){
    ob_start();
    ?>
    <div class="mini-cart-count">
        <?php echo WC()->cart->get_cart_contents_count(); ?>
    </div>
    <?php
        $fragments['.mini-cart-count'] = ob_get_clean();
    return $fragments;
}

Refreshing the mini-cart content example:

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_mini_cart_refresh_items');
function wc_mini_cart_refresh_items($fragments){
    ob_start();
    ?>
    <div class="mini-cart-content" style="display:none;">
        <?php woocommerce_mini_cart(); ?>
    </div>
    <?php
        $fragments['.mini-cart-content'] = ob_get_clean();
        return $fragments;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works.

---

If you need to use other related jQuery "body" delegated events, you can use wc_fragment_refresh or wc_fragments_refreshed too as they are cart related events.

Comments

[Vitalij]

Thanks for code, but I need only hande jquery based event "added_to_cart"

[LoicTheAztec]

@Vital your question is not so clear… we don't know how you are setting this jQuery code (hooked, template or registered) and where (if it's on single product pages or in shop archives (or somewhere else (with a product shortcode))… so please try to clarify and give a little more details. Thanks

[Vitalij]

Added picture. All is in shop archive.

[LoicTheAztec]

@Vital Updated my answer and get it working… please check the details. (The screenshot is so ugly, but explicit) :) …

[Vitalij]

Ok, working now, but.... I don't understand why your code not working if I will place it in js file that goes after add-to-cart.min.js file. Because when your code placed like you writed in functions.php, it goes before add-to-cart.min.js file and it works... :) This is a magic or this event 'added_to_cart' is being overwrited?

[LoicTheAztec]

@Vital Because when you enqueue the js external file in a classic way, you need to specify that it will be displayed on the footer (but not in the head) and you need to add sometimes others settings to make it work… You can use the hook like in my code for that (depending if you are using WP Ajax or not) and you don't need always to register scripts in external files.

[Vitalij]

My enqueued file loads not in header but in footer, after add-to-cart.js file. Very strange that it does not work.

[LoicTheAztec]

@Vital My answer just works with your initial question… I can't get in your code and settings as you didn't provide them…

[Federico Schiocchet]

It doesn't work