WooCommerce Shipping Calculator on Checkout Page

Do you want to display the shipping calculator on the checkout page? Then read on, as we will help you achieve this by using custom code snippets to modify some of WooCommerce’s core files. Of course, this means that you need to have some coding experience for you to implement this solution.

Table of Contents

It is important to note that WooCommerce has a built-in option to display the shipping calculator on the cart page. However, you might want to display it on the checkout page to allow users to calculate their shipping fees.

They will be required to fill out the country, state, city, and postcode form fields. After that, the customer needs to click on “Update Totals” to calculate the shipping.

To get the desired result, we will have to override the cart-shipping template. This means that you need to install or create a child theme. Then, you need to copy the template file into your child theme. This will ensure that your changes are not lost during an update.

WooCommerce Shipping Calculator on Checkout Page

By the end of this post, you will be able to display the shipping calculator on the checkout page. We will also share a custom jQuery code snippet to bind the button click event. You can use an alternative way, but this is the most recommended.

Before you proceed, you should also back up your site. This will help you to revert to the previous version if you make a mistake.

With that in mind, let us get right into it.

Steps to Display the Shipping Calculator on the Checkout Page

Here are the simple steps you need to follow:

First, you need to add the following code on the woocommerce/cart/cart-shipping.php file:

[php] if(is_checkout() && !$show_shipping_calculator && ‘yes’ === get_option( ‘woocommerce_enable_shipping_calc’ ) ) {
$show_shipping_calculator = true;
}

[/php]

After that, log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to display the shipping calculator on the checkout page.
Add the following code to the php file:

[php] add_action( ‘wp_enqueue_scripts’, ‘njengah_test’ );
function njengah_test() {
if( is_checkout() ) {
if( wp_script_is( ‘wc-cart’, ‘registered’ ) && !wp_script_is( ‘wc-cart’, ‘enqueued’ ) ) {
wp_enqueue_script( ‘wc-cart’ );
}
}
}
[/php]

The last step is to add an id tag to the shipping calculator’s update totals button. This can be achieved by binding the button click event in jQuery. Add below jQuery code in your child theme’s js file:

[php] jQuery(document).on(‘click’,’#calc_shipping’,function(e){
e.preventDefault();
var shipping_country_val = jQuery("#calc_shipping_country").val();
var shipping_state_val = jQuery("#calc_shipping_state").val();
var shipping_city_name = jQuery("#calc_shipping_city").val();
var shipping_postcode = jQuery("#calc_shipping_postcode").val();
jQuery("#billing_country").val(shipping_country_val);
jQuery("#billing_state").val(shipping_state_val);
jQuery(‘#billing_city’).val(shipping_city_name);
jQuery(‘#billing_postcode’).val(shipping_postcode);
jQuery("#shipping_country").val(shipping_country_val);
jQuery("#shipping_state").val(shipping_state_val);
jQuery(‘#shipping_city’).val(shipping_city_name);
jQuery(‘#shipping_postcode’).val(shipping_postcode);
$(‘#billing_country , #shipping_country’).trigger(‘change’);
$(‘#billing_state, #shipping_state’).trigger(‘change’);
});

[/php]

Wrapping Up

In summary, we have shared how you can enable the shipping calculator on the checkout page. However, you should be careful when editing WooCommerce’s core files. If you make any mistake, a critical error will be displayed on your site.

If you are not familiar with coding, we recommend contacting a qualified WordPress developer. This will ensure that you do not break down your site.

We hope that this post helped you to learn more about the WooCommerce shipping calculator.

Editorial Staff

How to Add WooCommerce Shipping Calculator on Checkout Page

WooCommerce Shipping Calculator on Checkout Page

Steps to Display the Shipping Calculator on the Checkout Page

Wrapping Up

Similar Articles

Related