travis-taylor-sml

Travis Taylor

WordPress | PHP | Entrepreneur

Woocommerce, how to use ajax to update shipping costs

I spent hours searching the web for an answer to this, only to find 6 people with the same question with no replies. So here’s the code I used for my shipping plugin:

function custom_checkbox_checker () {
if ( is_checkout() ) {
wp_enqueue_script( 'jquery' ); ?>
<script type="text/javascript">

jQuery(document).ready( function (e) {

var $ = jQuery;

// wc_checkout_params is required to continue, ensure the object exists
if ( typeof wc_checkout_params === 'undefined' )
return false;

var updateTimer,
dirtyInput = false,
xhr;

function update_shipping() {

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 liftgate = $( 'p.liftgate-checkbox .input-checkbox:checked' ).val();

var data = {
action: 'woocommerce_update_order_review',
security: wc_checkout_params.update_order_review_nonce,
liftgate: liftgate,
post_data: $( 'form.checkout' ).serialize()
};

xhr = $.ajax({
type: 'POST',
url: wc_checkout_params.ajax_url,
data: data,
success: function( response ) {
if ( response ) {
$( '#order_review' ).html( $.trim( response ) );
$( '#order_review' ).find( 'input[name=payment_method]:checked' ).trigger('click');
$( 'body' ).trigger('updated_checkout' );
}
}
});
}

jQuery('p.liftgate-checkbox .input-checkbox').on('click', function() {
update_shipping();

});

});

</script>
<?php }
}

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

Basically, you just want to replace “liftgate” with whatever the name of your checkbox is. This will automatically rerun your shipping calculator, so you want to include something like this in your calculate_shipping function to get the value:

$liftgate = isset($_POST['liftgate']) && $_POST['liftgate'] ? "1" : "0";

I hope someone else finds this useful, since there are no answers anywhere else.

  • Thanks a lot for posting this. Have been looking for a couple of weeks for a way to do this and it works just great. Perfect timing 🙂

  • Nima

    Thanks for your useful article.
    Can you help me with a similar problem:
    I want to update available shipping methods (with ajax) when billing_state is changed.

    I tested a changed form of your code but it didn’t work! :

    jQuery(document).ready( function (e) {

    var $ = jQuery;

    // wc_checkout_params is required to continue, ensure the object exists
    if ( typeof wc_checkout_params === ‘undefined’ )
    return false;

    var updateTimer,
    dirtyInput = false,
    xhr;

    function update_shipping() {

    if ( xhr ) xhr.abort();

    $( ‘#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.woocommerce_update_order_review,
    liftgate: liftgate,
    post_data: $( ‘form.checkout’ ).serialize()
    };

    xhr = $.ajax({
    type: ‘POST’,
    url: wc_checkout_params.ajax_url,
    data: data,
    success: function( response ) {
    if ( response ) {
    $( ‘#order_review’ ).html( $.trim( response ) );
    $( ‘body’ ).trigger(‘updated_checkout’ );
    }
    }
    });
    }

    jQuery(‘#billing_state’).on(‘change’, function() {
    update_shipping();

    });

    });

  • osama

    Hello, travis i liked you post but i have a question that i’m searching the web for and i can’t get an answer, i want to add a new row ( tr ) in the shipping method box ( review order box ) , but i see that that the html for the box itself comes from ajax request, how can i do that ? do i have to capture the response to edit the html in some way or what ? can you please help me ?

  • Alexander

    Hi.
    In Woocommerce 2.3.x it doesn’t work.

    Seems the method ajax doesn’t go to “calculate_shipping” function, because in this method I put [?php update_option(‘test1′,’this is test1’); ?] and when I open the phpmyadmin in wp_options table, this register doesn’t appearance.

  • rana tigrina

    Hi,

    I have a question. I am new to this, can you tell me what is liftgate, I want to do this when a shipping state drop down changes. How to achieve that?

    Thanks a lot

  • Sumit Arora

    Hi, this is a really helpful post. A lot of things clarified.

    Just to ask, is it possible to do the same with select box, i mean if I have shipping methods listed as a dropdown and I want to automatically select a shipping method based on some cookie/session parameter.?

  • Djo

    Good day!
    So has anyone actually tried this in practice? This method returns $( ‘#order_review’ ).html( $.trim( response ) ); – Object Object.

  • Jo

    what does this line means? and where do i put it?
    $liftgate = isset($_POST[‘liftgate’]) && $_POST[‘liftgate’] ? “1” : “0”;

    thanks

  • Leave a Comment

    Your email address will not be published. Required fields are marked *

    css.php