Update Order Review Via Ajax On WooCommerce Checkout Page

Many Times we need to apply some custom condition for calculating the cart total. For example, applying a different type of shipping and calculating the new cart total and showing in order review.

But you want to do it via AJAX. it means you don’t want to reload the checkout page.

For this, there is an action “woocommerce_update_order_review” which we have to use with WooCommerce Ajax Call.

Here is the code :


function custom_checkbox_checker () 
		if ( is_checkout() ) 
			wp_enqueue_script( 'jquery' ); ?>
			jQuery(document).ready( function (e) 
				var $ = jQuery;
				if ( typeof wc_checkout_params === ‘undefined’ )
				return false;

				var updateTimer,dirtyInput = false,xhr;

				function update_shipping(billingstate,billingcountry) 

					if ( xhr ) xhr.abort();

					$( '#order_methods, #order_review' ).block({ message: null, overlayCSS: { background: '#fff url(' + wc_checkout_params.ajax_loader_url + ') no-repeat center', backgroundSize:'16px 16px', opacity: 0.6 } });

						var data = {

						action: 'woocommerce_update_order_review',

						security: wc_checkout_params.update_order_review_nonce,

						billing_state: billingstate,

						billing_country : billingcountry,

						post_data: $( 'form.checkout' ).serialize()


						xhr = $.ajax({

						type: 'POST',

						url: wc_checkout_params.ajax_url,

						data: data,

						success: function( response ) {

						var order_output = $(response);

						$( '#order_review' ).html( response['fragments']['.woocommerce-checkout-review-order-table']+response['fragments']['.woocommerce-checkout-payment']);



						error: function(code){





			jQuery('.state_select').change(function(e, params){



<?php }


    add_action( 'wp_footer', 'custom_checkbox_checker', 50 );

In Above code, I am updating order review on change of state.

First of all I’ve created a function “custom_checkbhox_checker();” which has been initialize in “wp_footer” action.
after that, i’m checking for checkout page “if ( is_checkout() )”, if checkout page found then only apply this script otherwise not.

then after I’m passing parameter for AJAX in which we have used “action: ‘woocommerce_update_order_review’,” this action. also, you can pass additional data as per your need.

For Example, we have used “billing_state: billingstate, billing_country : billingcountry” as parameters.

in success response of Ajax, you’ll get the update HTML code for order review total and shipping method which you have to put into “#order_review” ID.