Where could I find an exhaustive list of javascript events defined by WooCommerce. ( Events like "woocommerce_variation_has_changed" )
3 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 -
2@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:
In addition to the full list references, you can go the interactive way and paste the below into your JS console and do the actions on the store, which you want to target, watch the console to see the effected events getting logged.
jQuery(document.body).on(
"init_checkout payment_method_selected update_checkout updated_checkout checkout_error applied_coupon_in_checkout removed_coupon_in_checkout adding_to_cart added_to_cart removed_from_cart wc_cart_button_updated cart_page_refreshed cart_totals_refreshed wc_fragments_loaded init_add_payment_method wc_cart_emptied updated_wc_div updated_cart_totals country_to_state_changed updated_shipping_method applied_coupon removed_coupon",
function (e) {
console.log(e.type)
}
)