JavaScript event list in WooCommerce: Checkout page, Cart page and Product page.
if you are creating a custom WooCommerce theme or developing a custom plugin in WooCommerce which need to manage things by jQuery or Javascript, you want to On select certain Payment some notice popup, or in the Checkout page on change address or city Update the trigger shipping cost. You can do it by using this Javascript event in WooCommerce. there are many ways to use it. like you can do it by add_filter or add_action in theme functions.php. or you can use your custom plugin for it.
On Checkout Page Javascript 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' );
On cart page Javascript 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 ] );
In Single product page Javascript event
$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );
In Variable product page Javascript event
$( document.body ).trigger( 'found_variation', [variation] );
On Add to cart Javascript 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' );
On Add payment method JavaScript event
$( document.body ).trigger( 'init_add_payment_method' );
How to bind listener to JS events, use:
jQuery('<target>').on('<name>', function(){ console.log('<name> triggered'); });
Conclusion
Most of them you have to use with WordPress Ajax request. you can learn wp_ajax here, here you can find how to debug WordPress Ajax.
if you still can’t solve your issues or you can’t archive your goal, please let a comment below in the comment sections. we will discuss to find a solution. if you are interested tutorial like this, please join us on our Facebook page or youtube channel.