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 :

<?php

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']);

						$('body').trigger('updated_checkout');

						},

						error: function(code){

						console.log('ERROR');

						}

						});

				}

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

			update_shipping(jQuery(this).val(),jQuery('#billing_country').val());

			});
		});

    
<?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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s