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?

Answer 1

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.