How to Add WooCommerce Shipping Calculator on Cart Page

Table of Contents

Are you looking for a simple and easy way to enable or disable the shipping calculator on the cart page?

In today’s brief tutorial, we will help you do this using the built-in option offered by WooCommerce.

In addition, we will share a custom snippet to disable the shipping calculator on the checkout page.

The shipping calculator on the cart page allows users to calculate their shipping fees before going to the checkout page.

First, they are 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.

This section is very important, but you can disable it.

There are also times when you only want to calculate shipping based on country or postcode. This means that you have to remove some of the input fields to enhance the UX.

This means that we have to edit WooCommerce’s core files to get the desired result.

WooCommerce Shipping Calculator on Cart Page

By the end of this tutorial, you will be able to enable or disable the shipping calculator.

We will also share how you can disable some of the input fields apart from the country field, which is mandatory.

To implement the second solution, you need to ensure that you have created or installed a child theme. This will ensure that your changes are not lost during an update.

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

Steps to Enable or Disable WooCommerce Shipping Calculator on the Cart Page

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on WooCommerce > Shipping > Shipping options.
Click on the checkbox to enable the shipping calculator on the cart page. Leave it unchecked if you do not want to display the shipping calculator.
Remember to save your changes.
This is the outcome:
If you want to disable the state, city, and postcode input fields, add the following code:

// 1 Disable State
add_filter( 'woocommerce_shipping_calculator_enable_state', '__return_false' );
// 2 Disable City
add_filter( 'woocommerce_shipping_calculator_enable_city', '__return_false' );
// 3 Disable Postcode
add_filter( 'woocommerce_shipping_calculator_enable_postcode', '__return_false' );

This is the outcome on the cart page. You can see that we did not remove the country input field because it is important. It is essential for completing the order:

Conclusion

By now, you should be able to enable or disable the shipping calculator on the cart page. WooCommerce provides us with a convenient built-in option to do this.

In addition, we have shared a custom code snippet we created for hiding some of the input fields on the shipping calculator.

You should be careful when editing the functions file. If you make a mistake, a critical error will be displayed on the front end.

If you need additional functionality, we recommend using a trusted shipping calculator plugin. This is because it is important to provide the best shipping experience to customers in your store.

We hope that this post helped you learn more about the shipping calculator on the checkout page.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Add WooCommerce Shipping Calculator on Cart Page

WooCommerce Shipping Calculator on Cart Page

Steps to Enable or Disable WooCommerce Shipping Calculator on the Cart Page

Conclusion

Similar Articles

Related