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!
Leave a Reply
Who’s this guy?
My name is Jeroen, go ahead and try to pronounce that! I bet you get it wrong if you’re not Dutch 
I am a professional WordPress Plugin Developer, working from Alphen aan den Rijn in the Netherlands. Besides being a seasoned developer, I have a solid background in SEO and have been responsible for hundreds of websites and webshops in my previous work experience.
I build custom plugins for WordPress, WooCommerce and Easy Digital Downloads. My focus is to build the best, secure, reliable, optimized plugins with a good User Experience.
When not working, I like to watch tv series and eat some healthy home-made pizza.
41 thoughts on “Modifying the WooCommerce cart shipping calculator”
Hey thanks for all the wonderful articles. I will go through them one by one.
For country and City dropdown “States, Cities, and Places for WooCommerce” woked well for me.
Thanks
Works great. Thank you.
What about simply removing the Shipping Calculator button all together?
My shipping is calculated based on weight, nothing else.
I`ve been using Inspect Element but nothing seems to remove the button.
Kind regards,
Nevermind about my earlier comment about removing the button altogether. Found the VERY OBVIOUS solution….uncheck it in Shipping Options : /
“[ ] Enable the shipping calculator on the cart page”
Sorry to bother you.
Dear Jeroen,
thank you very much for your extensive post to this topic. Unfortunately, I still fail to add the WooCommerce standard field “shipping_address” to the Shipping Calculator in such a way that its content is also saved. Maybe the secret lies in your last part “Saving the custom calculator field value” – but somehow I don’t understand it correctly.
I would appreciate it very much if you could maybe formulate a short addition on how to add the WC default field “shipping_address” to the Shipping Calculator.
Thank you very much and best regards,
Sascha
Hi Sascha,
You’d need to make sure its stored to the customer object appropriately so WooCommerce gets the value automatically. I don’t have any existing code that does this, but it should definitely be possible/work 👍
Cheers,
Jeroen
Hi there, found this post of yours, I want to add a field for Suburb in the calculate shipping on the cart page, but I have no developer skills, my client want a field Suburb. This will help their plugin to retrieve the correct fields required to get shipping quotes from the different courier companies.
I’m having the same problem as Sascha. I need to enable the address_1 and address_2 fields in the shipping calculator. I’ve tried adding the code below to a modified version of calculate_shipping.php in my child theme, as well as trying in the plugin file of the same name (only including address_1 code here), but it does nothing. These are fields that already exist in the system, not custom fields. The fields won’t display. How do I get them to show up?
<input type="text" class="input-text" value="customer->get_shipping_address_1() ); ?>” placeholder=”” name=”calc_shipping_address_1″ id=”calc_shipping_address_1″ />
… it seems my full code didn’t show up. In simple terms, I used the code for “woocommerce_shipping_calculator_enable_city” and replaced “city” with “address_1” in the added section.
Hi Cliff,
Unfortunately it won’t work like that. The city field is supported out of the box and can be enabled like that. The address field(s) are not.
It would require a further customization if you’d like to add that. Feel free to reach out through a contact form if you need help with this.
Cheers,
Jeroen