In most cases WooCommerce will show a couple fields to allow the customer to calculate their shipping cost in the cart. This is always the country field and zip- / postcode field, and sometimes in between those the state / province field.

This is a good start, but for some of you who have shipping setup based on other kinds of variables using the Advanced Shipping plugin this isn’t enough. Say for example you have the shipping based on customer’s city, in that case he won’t be able to calculate his shipping in the cart, while this is a great feature to have.

Modifying the shipping calculator fields

In this post I’m going to give you some code snippets that show you how you can modify the shipping calculator by adding and/or deleting the available fields.

Enabling the city field / disable postcode / ZIP

WooCommerce has two fields build in that can easily be enabled / disabled from the calculator. You can turn on the city field and disable the postcode field with another. Later on I’ll show how you can add other fields too, but that does require more effort.

With this code snippet you can enable the city field:

And with this code snippet to disable the existing postcode / ZIP field:

Going deeper: Modifying and adding other fields

As mentioned the other (country / state) fields cannot be easily disabled, nor can you easily (with one line of code) add other fields. To accomplish this you’d need to override the existing template file of the calculator in your child theme.

Don’t have a child theme or know how to override template files? Read these posts to catch up on that:
– Read more about child themes
– Read more about WooCommerce template overriding

Locate and override the template ‘templates/cart/shipping-calculator.php
Make sure you have the ‘shipping-calculator.php’ script copied to your own child theme and set to the correct directory (‘woocommerce/cart/’). In case you’re unsure if you got the right script, here’s a link to the source from WooCommerce: https://github.com/woocommerce/woocommerce/blob/2.6.0/templates/cart/shipping-calculator.php

Removing the country field
In the case where you only ship to one country it may be useful to remove the country field. Otherwise the customer would still see a dropdown with only one option. Instead it would be good to just show the country name.

You can also do the same thing for like the state field.
PS. you don’t have to comment out the old code, you can also remove it, but it can be good for reference.

Adding a custom field
If you’ve added a custom shipping field for example through my Advanced Checkout Fields plugin (or another plugin / code snippet) you can also add this to the shipping calculation. This does require some extra work to ensure WooCommerce is also saving the values you’re sending through the calculator.

Example scenario: You’ve added a dropdown at the checkout with a few options for the customer to choose from. I’m going to call my custom field ‘Area’.

First we want to add the same type of dropdown to the shipping calculator:

This is a example of adding a dropdown, but depending on your needs you may need to modify it to fully fit your needs. You can position this anywhere within the little form.

Now it is showing the dropdown, but not yet using it to calculate the shipping. For that we need a code snippet placed within the themes function.php file.

Saving the custom calculator field value
Next we need to ensure the custom field we created is also used properly for the calculation of the shipping. In this case we want to assign the value set to the shipping_area of the customer, which can also be setup as condition for the shipping.

The code snippet below checks if the value is available, and if so it will save it to the customer object.

And thats the end of it! Hope it helped you out, let me know if you run into anything as it is a bit more complex to set this up properly.

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

41 thoughts on “Modifying the WooCommerce cart shipping calculator

Stavros January 25, 2017 at 12:49 am

Very good Article Jeroen,

Could you please post the snippet to remove the state from the shipping calculator.

I want to leave just the country dropdown list

Thank you

Jeroen January 25, 2017 at 9:55 am

Hi Stavros,

I’m afraid there’s not an easy code that you can use to disable the state field (no hooks available).
The only way to disable that is by overriding the shipping calculator template file and remove it directly in there.

Cheers,
Jeroen

steve-o January 26, 2017 at 10:34 pm

does the line below get placed inside the functions.php files?

add_filter( ‘woocommerce_shipping_calculator_enable_postcode’, ‘__return_false’ );

Jeroen January 27, 2017 at 9:02 am

Hi Steve,

That is correct, functions.php in your child theme would be the easiest way to integrate this.

Cheers,
Jeroen

Reed February 21, 2017 at 2:07 am

How do you modify the text for “Calculcate Shipping”?

Diana February 23, 2017 at 7:33 pm

Hi Jeroen ,
I am struggling here with modifying the shipping calculator fields and hope you will be able to help.
Can I make the postcode field required but only for specific countries?
For example I want the post code to be required for UK but not for Denmark..Is this possible?
help please….much appreciated!

Thanks in advance

Jeroen February 24, 2017 at 8:38 am

Hi Diana,

There is a work-around, but it isn’t the best.
You could hook into the postcode validation functionality and allow postcodes in Denmark to be empty. The downside of that is that probably other areas such as the checkout may be affected by that too.

Cheers,
Jeroen

Matt February 28, 2017 at 10:15 pm

Hi Jeroen,

Is there a way to make the postcode field mandatory

Rodrigo March 11, 2017 at 1:53 am

Hi Jeroen,

I would like to know, how can I remove or hidden the coutry field and state field in my shipping calculator of the woocommerce. Because I would like to calculate the shipping by the zipcode. Is it possible? How can I do this?

thanks.

Beppe April 2, 2017 at 8:56 am

Hi Jeroen,
great article! I’ve a question for you: all my shipping classes have the same cost for Italy without differences related to cities or ZIP code, and my shop sell and ship only in Italy. Is it possible to avaid the shipping calculation and show immediately the shipping cost?
Many thanks
Have a great life
Beppe

Jeroen November 8, 2017 at 2:41 pm

Hi Beppe,

Yes you can setup shipping rates in WC flat rate settings to be based on the shipping class.
Then in the WC Settings you can configure to use the shop base address as the default shipping calculation, which will make WC calc. cost immediately without having to enter data in the shipping calculator.

Cheers,
Jeroen

Sebastian April 22, 2017 at 8:09 am

Hi!
Mi struggling with shipping fees right now. I already have states and cities enabled, the problem now is: how to add cities into the calculation. I mean, if customer is buying from city X (state A) fee is going to be $5, but if he purchases from city Y ( State A), fee would be $9. Di you have any ideó on how to do it?
Thank you in advance

Jeroen November 8, 2017 at 2:40 pm

Hi Sebastian,

It depends on your setup, if you can setup the shipping rates based on the city postcodes you can use WC Core shipping options. Otherwise I’d recommend looking at a plugin to setup shipping cost, my Advanced Shipping plugin does allow you to setup shipping cost per city.

Cheers,
Jeroen

Sabina May 25, 2017 at 10:15 am

Hi Jeroen,
How can I place my shipping calculator on store page? I tried to modify the code numerous times but without satisfying effect. Would it be at all possible?

Thank you

Jeroen May 25, 2017 at 12:19 pm

Hi,

I do believe this is possible, but not something that is covered in this blog post. You’d need to go a different route to accomplish something like that then whats described in here.

Cheers,
Jeroen

Bianca October 31, 2017 at 5:30 pm

Hey,
awesome info in here.

Any hint why:
add_filter( ‘woocommerce_shipping_calculator_enable_city’, ‘__return_false’ );
does not hide city menu? 😀

Bianca October 31, 2017 at 5:36 pm

Just for info:
i was refferring to “province” field in italian version.
And it, of course, can be hidden using

add_filter( ‘woocommerce_shipping_calculator_enable_province’, ‘__return_false’ );

Anyway thanks for pointing me in the right direction mate!

Barry November 10, 2017 at 3:31 am

how do we access the WC()->customer->__set( ‘shipping_area’, $area ); value after it is set?

Jeroen November 14, 2017 at 8:43 am

WC()->customer->__get('shipping_area') or since its a magic method; WC()->customer->shipping_area. Haven’t tested this.

Courtney November 14, 2017 at 12:01 am

Is there a way to replace the shipping calculator with text that says “Shipping calculated at checkout” ? I feel like I’ve searched everywhere for a way to do this and this is the closest I’ve found to something that might work.

For some reason it just shows shipping as a blank field on the cart page. If I go to checkout it says “Enter your full address to see shipping costs.”

Then if I enter my address and go back to the cart page, it displays the shipping options. I want it to display “Shipping calculated at checkout” before anything is ever entered.

I appreciate any insight you might have regarding this. Thank you for sharing the info you already have

Jeroen November 14, 2017 at 8:42 am

Hi Courtney,

A similar message is already available in WooCommerce, you just have to enable this setting; https://cl.ly/3n2t461n3v0b

Cheers,
Jeroen

Paris Koutroumanos December 13, 2017 at 9:48 am

Hello Jeroen,

How can make the postcode field mandatory?

Thank you.

Jeroen December 13, 2017 at 9:59 am

Hi Paris,

I don’t think there’s a standardized way to make any of the shipping calculator fields mandatory in Woo, so far none of them are mandatory to set, if I check the country field you can leave it empty and it will allow it.

Regards,
Jeroen

Paris Koutroumanos December 13, 2017 at 10:34 am

Thanks Jeroen.

Have a nice day.

Fazal Jarral December 28, 2017 at 7:49 pm

Hello Great Article Bro!
I have shipping Calculator On My Site. The Issue Is it automatically shows up 16$ even before customer enters data in field. I want to remove that 16$.
If you could help me ? How can i do this?

Thanks 🙂

Peter February 22, 2018 at 6:24 pm

Please how do you make a dropdown of cities in the shipping calculator. It appears as text field

David April 18, 2018 at 12:01 pm

Are there other fields that can be removed – State and County and is it

add_filter( ‘woocommerce_shipping_calculator_enable_county’, ‘__return_false’ );

add_filter( ‘woocommerce_shipping_calculator_enable_state’, ‘__return_false’ );

David April 18, 2018 at 1:45 pm

Well they didn’t work. What are the filters to remove State and County?

James Myres January 15, 2019 at 9:05 pm

Jeroen,

Thanks for the great snippet.

Any ideas how to either fill out state and city fields based on zip code entry or display the shipping method error if they are not matching by the address verification of the shipping method.

Either one of these will fix the Fedex shipping method not showing when they do not match. This only happens with Fedex Basic. USPS Simple does not care as long as the zip is right.

Wilbert February 22, 2021 at 10:06 am

Re Removing the country field
It seems when i add this code to my template child theme, the country isnot available anymore. The shiipiing cost canot be clacluted?
Do I need osme extra to have my only ship to country as default?

Jeroen Sormani February 22, 2021 at 10:23 am

There’s a setting in the General section that allows for setting the default customer country 😉

M April 14, 2021 at 3:00 am

bro bro bro bro brooooo You have done alot for me by this article, whish u all the best maaaaaan <3

Leave a Reply