Woocommerce: custom jquery event after added to cart

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

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.

Advertisement

Answer