16

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

Improve this question
64

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();
});
Improve this answer
5
  • 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 '20 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 '20 at 9:05
  • 1
    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 '20 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
    Aug 13 '20 at 9:56
7

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 reset
  • show_variation triggered when a variation has been found which matches all attributes
  • woocommerce_variation_select_change triggered when an attribute field changes
  • woocommerce_variation_has_changed triggered when variation selection has been changed
  • check_variations triggered:
    • when an attribute field changes
    • when reload variation data from the DOM
  • woocommerce_update_variation_values triggered when variations have been updated
  • woocommerce_gallery_reset_slide_position reset the slide position if the variation has a different image than the current one
  • woocommerce_gallery_init_zoom sets product images for the chosen variation

CART FRAGMENTS

  • wc_fragments_refreshed triggered when refreshing of cart fragments via Ajax was successful
  • wc_fragments_ajax_error triggered when refreshing of cart fragments via Ajax has failed
  • wc_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 field
  • country_to_state_changing and wc_address_i18n_ready handle locale

SINGLE PRODUCT

  • wc-product-gallery-before-init triggered before initializing all the galleries on the page
  • wc-product-gallery-after-init triggered after initializing all the galleries on the page

PRICE SLIDER

  • price_slider_updated triggered after price slider updated
  • price_slider_create triggered after price slider create
  • price_slider_slide triggered after price slider slide
  • price_slider_change triggered after price slider change

Related answers:

Improve this answer

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.