Where could I find an exhaustive list of javascript events defined by WooCommerce. ( Events like "woocommerce_variation_has_changed" )
2 Answers
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' );
$( document.body ).trigger( 'applied_coupon_in_checkout' );
$( document.body ).trigger( 'removed_coupon_in_checkout' );
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 Variable product page JS events
$( document.body ).trigger( 'found_variation', [variation] );
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();
});
-
Thank you for your answer, this is what I was looking for, I will come back here if I find other events.– ZecKaNov 8, 2019 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.– BadgerMar 12, 2020 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?– jgangsoMar 16, 2020 at 9:05
-
1Nothing 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'– BadgerMar 17, 2020 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.– jgangsoAug 13, 2020 at 9:56
To find a complete list of all events (and stay updated on any new ones added) you can consult the .js files in the directory:
/wp-content/plugins/woocommerce/assets/js/frontend
Below I report other events (in addition to @jgangso's answer):
VARIATIONS
hide_variation
triggered when displayed variation data is resetshow_variation
triggered when a variation has been found which matches all attributeswoocommerce_variation_select_change
triggered when an attribute field changeswoocommerce_variation_has_changed
triggered when variation selection has been changedcheck_variations
triggered:- when an attribute field changes
- when reload variation data from the DOM
woocommerce_update_variation_values
triggered when variations have been updatedwoocommerce_gallery_reset_slide_position
reset the slide position if the variation has a different image than the current onewoocommerce_gallery_init_zoom
sets product images for the chosen variation
CART FRAGMENTS
wc_fragments_refreshed
triggered when refreshing of cart fragments via Ajax was successfulwc_fragments_ajax_error
triggered when refreshing of cart fragments via Ajax has failedwc_fragment_refresh
refresh when page is shown after back button (safari)wc_fragments_loaded
triggered after the cart fragments have been loaded
COUNTRY SELECT (CHECKOUT)
country_to_state_changed
triggered when the country changes from the select fieldcountry_to_state_changing
andwc_address_i18n_ready
handle locale
SINGLE PRODUCT
wc-product-gallery-before-init
triggered before initializing all the galleries on the pagewc-product-gallery-after-init
triggered after initializing all the galleries on the page
PRICE SLIDER
price_slider_updated
triggered after price slider updatedprice_slider_create
triggered after price slider createprice_slider_slide
triggered after price slider slideprice_slider_change
triggered after price slider change
Related answers: