Run javascript code after ajax add to cart event in Woocommerce

Question

In woocommerce I have an add to cart button with the following classes:

button product_type_simple add_to_cart_button ajax_add_to_cart 

I want to run a javascript code once this button has been clicked. It is a custom JS file. How can I trigger my custom js file when this class is clicked?

Answer 1

Try the following code where you can trigger some code on ajax add to cart, once product is added to cart:

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
function trigger_for_ajax_add_to_cart() {
    ?>
        <script type="text/javascript">
            (function($){
                $('body').on( 'added_to_cart', function(){
                    // Testing output on browser JS console
                    console.log('added_to_cart'); 
                    // Your code goes here
                });
            })(jQuery);
        </script>
    <?php
}

Code goes in function.php file of the active child theme (or active theme). Tested and works.

Answer 2

If you need to access JQuery, you need to add a hook for a click on all the elements with that class. .click() Documentation .

Basically what you need to do is the following:

$('.button').click(function(event){
// your code here
});

Where $() is calling jQuery, '.button' is saying all the elements with class ('.') 'button', and .click is adding a handler on each click event on those items. Read documentation for further explanation + there are a lot of questions on this subject already so most information is either in docs or in stackoverflow\\google.

Good luck!