When you're working with WooCommerce, knowing how and when things happen on the frontend is huge. Luckily, WooCommerce triggers a ton of JavaScript events during the checkout process, cart updates, product pages, and more. These events are your way in β letting you hook into what WooCommerce is doing without touching its core code. Stuff like updating totals when a coupon is applied, reacting when a variation is selected, or doing something fancy when a payment method is picked β itβs all tied to events like update_checkout, found_variation, and payment_method_selected.
Catching these events is super simple. Most of the time, WooCommerce fires them on the body, so you just slap on a jQuery .on() listener. Something like $('body').on('update_checkout', function() { /* do your magic */ }); and you're in. Whether you want to tweak the cart page, enhance the checkout experience, or customize how adding to cart feels, these events give you a clean, flexible way to make WooCommerce behave exactly how you want β without hacking it apart.
Credit for this post goes to this stack overflow question
Woocommerce Checkout JS events
Woocommerce cart page JS events
Woocommerce Single product page JS events
Woocommerce Variable product page JS events
Woocommerce Add to cart JS events
Woocommerce Add payment method JS events
To bind listener to these events, use:
For example:
