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?

If the JS file loads when the page loads, then you could just use an onClick event to run the code you want? Loading the "file" onclick is not really possible but there is a workaround suggested [here](https://stackoverflow.com/questions/7789521/how-to-link-external-javascript-file-onclick-of-button) — Kyon147, Mar 14 '18 at 15:43

LoicTheAztec · Accepted Answer · 2018-03-14T16:33:13.157

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.

Run javascript code after ajax add to cart event in Woocommerce

1 Answers1

Linked

Related