How To Use WooCommerce JavaScript AJAX Events
Common WooCommerce AJAX Events
update_cart
This event is triggered whenever cart quantities are updated.
updated_wc_div
Triggered after the AJAX update of the cart totals.
updating_cart
Manually triggered before the AJAX request to update the cart.
applied_coupon & removed_coupon
These events are triggered after a coupon is either applied or removed.
wc_fragments_loaded
wc_fragments_refreshed
Triggered when sections of the page are updated with new HTML content.
added_to_cart
Triggered when a product is added to the cart from the shop page.
removed_from_cart
Triggered when a product is removed from the cart via AJAX in the mini-cart.
checkout_error
Occurs when an AJAX error happens during checkout.
checkout_updated
Triggered when checkout details are updated, such as changes in shipping method or payment information.
How to Use These Events in Your Code
Example: Listening to the updated_wc_div Event
document.addEventListener('DOMContentLoaded', function () { /* wait until jQuery is ready */
jQuery(document.body).on('updated_wc_div', function() {
updateLayout(); // Your custom function
});
});
Quick Start
To get started quickly and identify which event you need and when each event is fired, navigate to the front end of your WooCommerce site. Open the browser console (F12 on Chrome, Option + ⌘ + C on Safari), paste the following jQuery code, and press Enter.
// Listen for cart update events using jQuery
jQuery(document.body).on('updated_wc_div', function() {
console.log('Cart was updated.');
});
// Listen for cart quantity updates before AJAX request is sent
jQuery(document.body).on('update_cart', function() {
console.log('Cart update is about to be sent.');
});
// Listen for the start of cart updating
jQuery(document.body).on('updating_cart', function() {
console.log('Cart is currently being updated.');
});
// Listen for coupon application
jQuery(document.body).on('applied_coupon', function(event, coupon_code) {
console.log('Coupon applied:', coupon_code);
});
// Listen for coupon removal
jQuery(document.body).on('removed_coupon', function(event, coupon_code) {
console.log('Coupon removed:', coupon_code);
});
// Listen for when WooCommerce fragments are loaded
jQuery(document.body).on('wc_fragments_loaded', function() {
console.log('WooCommerce fragments loaded.');
});
// Listen for when WooCommerce fragments are refreshed
jQuery(document.body).on('wc_fragments_refreshed', function() {
console.log('WooCommerce fragments refreshed.');
});
// Listen for product addition to the cart on shop page
jQuery(document.body).on('added_to_cart', function(event, fragments, cart_id, button) {
console.log('Product added to cart:', button.attr('data-product_id'));
});
// Listen for product removal from the mini-cart
jQuery(document.body).on('removed_from_cart', function(event, fragments, cart_id) {
console.log('Product removed from cart:', fragments);
});
// Listen for checkout errors
jQuery(document.body).on('checkout_error', function() {
console.log('Checkout error occurred.');
});
// Listen for updates at checkout
jQuery(document.body).on('checkout_updated', function() {
console.log('Checkout details updated.');
});
Interact with your cart by adding or removing items, applying or removing coupons, and adjusting quantities. The console logs will appear at different stages of these actions, providing insight into when and where each event occurs.
Note: Console code only runs for the current page load. If you navigate away or refresh the page, the code will be lost. You’ll need to paste and execute it again.