3

Where could I find an exhaustive list of javascript events defined by WooCommerce. ( Events like "woocommerce_variation_has_changed" )

15

On a hunt for the same I took a little dive into the JS source files.

Woocommerce Javascript events

Woocommerce Checkout 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' );

Woocommerce 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 ] );

Woocommerce Single product page JS events

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

Woocommerce 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' );

Woocommerce Add payment method JS events

$( document.body ).trigger( 'init_add_payment_method' );

To bind listener to these events, use:

jQuery('<event_target>').on('<event_name>', function(){
    console.log('<event_name> triggered');
});

F. ex.

jQuery('body').on('init_checkout', function(){
    console.log('init_checkout triggered');
    // now.do.whatever();
});
| improve this answer | |
  • Thank you for your answer, this is what I was looking for, I will come back here if I find other events. – ZecKa Nov 8 '19 at 12:52
  • This is not working for me. I suspect my script needs to be made dependent on the woocommerce scripts, but I don't know what they're registered as. – Badger Mar 12 at 14:50
  • @Badger what more specifically isn't working? Which page are you working on, and have you checked that the woocommerce scripts are being loaded? – jgangso Mar 16 at 9:05
  • Nothing is logged to the console when I add something to the basket on the product page using the following code: jQuery(function() { // Product added to basket jQuery('body').on('added_to_cart', function(){ console.log('Item was added to cart'); }); }); The scripts appear to be loading. I have enqueued my script to be dependent on 'woocommerce' – Badger Mar 17 at 17:03
  • @Badger sorry I totally forgot to answer you. For others who might experience the same issue, by default Woocommerce does a full page reload upon add-to-cart event, hence the JS event never takes place. If you enable add-to-cart with AJAX in WC settings, you'll get the JS event too. – jgangso yesterday

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.