How to Use WooCommerce JS Events to Insert Custom JavaScript Action

When developing WooCommerce themes or plugins, you’ll inevitably need to work with JavaScript. To make this easier and more robust, WooCommerce provides a variety of built-in JS Events. These events allow you to hook your own custom JavaScript logic at precisely the right moments in the user’s shopping journey.

JS Events in WooCommerce

Below is a selection of the most commonly used JS Events provided by WooCommerce. For a complete list, you can refer to the WooCommerce JavaScript source code.

Checkout Page JS Events

$( document.body ).trigger( 'init_checkout' );
$( document.body ).trigger( 'payment_method_selected' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_checkout' );
$( document.body ).trigger( 'checkout_error' );
$( document.body ).trigger( 'applied_coupon_in_checkout' );
$( document.body ).trigger( 'removed_coupon_in_checkout' );

Cart Page JS Events

$( document.body ).trigger( 'wc_cart_emptied' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_wc_div' );
$( document.body ).trigger( 'updated_cart_totals' );
$( document.body ).trigger( 'country_to_state_changed' );
$( document.body ).trigger( 'updated_shipping_method' );
$( document.body ).trigger( 'applied_coupon', [ coupon_code ] );
$( document.body ).trigger( 'removed_coupon', [ coupon ] );

Product Details Page JS Events

$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );

Variable Product Page JS Events

$( document.body ).trigger( 'found_variation', [variation] );

Add to Cart JS Events

$( document.body ).trigger( 'adding_to_cart', [ $thisbutton, data ] );
$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'removed_from_cart', [ response.fragments, response.cart_hash, $thisbutton ] );
$( document.body ).trigger( 'wc_cart_button_updated', [ $button ] );
$( document.body ).trigger( 'cart_page_refreshed' );
$( document.body ).trigger( 'cart_totals_refreshed' );
$( document.body ).trigger( 'wc_fragments_loaded' );

How to Use These JS Events

To use these events for your custom actions, simply bind to the events provided by WooCommerce on the appropriate target (usually document.body), as shown in the example below:

jQuery('body').on('init_checkout', function(){
    console.log('init_checkout triggered');
});