For those store owners for who it is needed to setup city based shipping rates this can be a very interesting change. As you may know it is possible to setup city based using my Advanced Shipping for WooCommerce plugin, the downside of that can be that your customers can enter their own values at the ‘Shipping city’ field. This means that you’d have to enter any type of variation a customer can enter to ensure the correct shipping cost are calculated and shown at the totals.

Chances still remain that the customer makes a typo or enters a value that is not recognised by the values you setup for the shipping rates. A possibly solution to this is to change the existing text-input to a dropdown. This way you will have the control which options are available and the customer can enter. In the end this can reduce the error rate at the checkout.

Changing the city field to a simple dropdown

The following code snippet will change the city field to a simple dropdown. You are able to setup both the display value to the customer, and the so called ‘index’ or ‘key’ which is what the ‘City’ condition will match against (when using the Advanced Shipping plugin).

With the result looking like:

Making a searchable city dropdown

If you have a bigger list of cities then I’ve shown above it would be a good idea to change it to being a searchable field, just like how the Country field works. Making it a searchable field can be done with a few additional lines of code.

This is how it looks with the searchable field:

Setting up shipping rates based on city

With this example you can more easily setup rates based on the city field. Now you only have one variation the customer can enter instead of many different variations and prevent possibly typo’s. To setup city based shipping using the ‘City’ condition you can now enter the ‘key/index’ values set in the above code to match in the condition against what the user selects.

Sample condition

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

48 thoughts on “How to change the city field to a dropdown

Himbutu November 26, 2017 at 11:15 am

Hi Jeroen, That’s amazing! Does this work on Shipping Calculator on the cart page too?

Jeroen November 26, 2017 at 9:16 pm


I don’t think this snippet will change the city field on the cart page, you’d probably need a custom template for something like that.


Himbutu December 16, 2017 at 3:27 pm

Hi Jeroen, Thanks. will give it a try 🙂
It seems like the searchable city snippet is not working. Is it a compatibility issue?

Himbutu December 16, 2017 at 5:49 pm

Hi, It’s working now fine. Done a mistake when coding. Thank you so much, Jeroen 🙂

husam January 20, 2018 at 11:18 pm

hi dear , its a fantastic plugin , but where should i put this code to get dropdown list ? i mean in which of wordpress files i should edit and add this ?

Stefanus Hosea March 8, 2018 at 10:48 am

in functions.php on your theme file ✌🏻
Edit via /wp-admin/theme-editor.php?file=functions.php

Jeroen March 8, 2018 at 11:21 am

Yes, as Stefanus mentioned, the (child) themes functions.php would be a good place.

In case you’d like to know more about adding a code snippet to your site, I wrote this post recently:


ali February 7, 2018 at 2:18 pm

Hi, is there any way to show drop down in my account addresses where we edit our address

George February 23, 2018 at 3:19 pm

Hey there! Thanks for the post!

Question – is there a quick way to make the options available through an ajax call?

Jeroen March 8, 2018 at 11:22 am

Hi George,

What is your goal with that? Are you trying to make the AJAX call just return a list of cities, insert them into the city field too, make it change on country for example?


Ali March 22, 2018 at 5:06 pm

Nice work, but when I choose another country, the list of cities remains the same for all countries. Any ideas will be appreciated. Thanks

Jeroen Sormani April 19, 2018 at 8:46 am

Hi Ali,

I’ve not accounted for changing countries within my code snippet/post.
Using my plugin you can setup conditional fields based on the entered country, but I’m actually not sure if this would also work for setting up multiple fields with the same field ID (will have to give that a pass sometime)


Ozgur Erdogan April 18, 2018 at 9:52 pm

Can we also make dropdown at cart page which is before checkout page?

adrian April 30, 2018 at 12:27 pm

HI Jeroen

It works great only issue im having is it shows the first city in the list as the default city instead of having a blank field , I wanted a blank field so that a user has to choose a city from the drop down. thanks hope I;m clear thanks


Jeroen Sormani April 30, 2018 at 1:51 pm

Hi Adrian,

You could add a empty option at the beginning of the list (one without a title) to accomplish that.


Shabeer May 2, 2018 at 10:53 am

Hi Jeroen,

Thank you for the sharing this amazing code snippet. I was wondering if there was an automated way to get the list of cities based on the cities added in the “shipping rates based on city”. So then I wouldn’t have to add the cities manually in two places

For example in line 12, how could I update it to do something like this :
‘options’ => get_list_cities_from_shipping_rate(),

If that makes sense?

Thank you

Jeroen Sormani May 2, 2018 at 5:46 pm

Hi Shabeer,

You can do just that, create a function to get the list of cities and use that function accordingly in both snippets.


Knaven Rey Sarroza July 12, 2018 at 5:54 am

Hi Jeroen,

What if my cities will be based on my states?

That would be possible?

Thank You!

Nikola Pervan August 2, 2018 at 9:23 am

Hello, thank you for the snippet.. the searcheable field is not working :/ Do you have any update regarding that?

Jeroen Sormani August 2, 2018 at 9:55 am


Just tested the snippet, works perfectly for me – you’d wanna check to see if you don’t have any JavaScript errors preventing this from working.


Dumindu Dushyantha August 2, 2018 at 11:03 am

Hi Jeroen

This is Amazing. Do you have any idea to add this cities drop down list in Shipping Calculator?

Thank You

mido August 12, 2018 at 7:26 am

how to make town city dropdown if someone select one of state , for example if someone select one of state from the list the town city loading some options belong to that state .
thank you

Tamara August 29, 2018 at 10:28 pm

Fantastic tutorial, thank you!

Isaac Quaye September 11, 2018 at 9:00 pm

Great tutorial. Can you do the same for states.

David Ramírez September 24, 2018 at 10:24 am

You saved my life, twice. Thanks for your help.

michael October 16, 2018 at 10:55 am

Please assit me where to paste this code , i dont know where to put it

Jeroen Sormani October 16, 2018 at 3:33 pm

I wrote this blog post on adding a code snippet;


mart October 24, 2018 at 8:51 am

where can i put that code?

Jeroen Sormani October 24, 2018 at 9:06 am

Please see my reply to Michael’s comment for implementation instructions.

Shams February 17, 2019 at 3:12 pm

Thanks for that. But is it possible to make the city dropdown conditional? Such that it depends on the State Selected? Thanks

Jeroen Sormani March 20, 2019 at 4:50 pm

Hi Shams,

Sure its possible, but it does require a lot further customization then what is available in this post as the available options needs to be passed/shown based on the selected state and not before.
If you need help with this, feel free to reach out through the ‘Hire me’ page.


Omar March 16, 2019 at 11:10 pm

Hello Jeroen,
I need to add weight-based shipping rules to different cities.

I don’t know how to do that

Jeroen Sormani March 20, 2019 at 4:21 pm

Hi Omar,

My Advanced Shipping plugin allow you to create shipping rates per city 😉


hakimuddin April 22, 2019 at 3:24 pm

hey i need to put condition on city field like if person choose “Amsterdam” city then one more select field dynamically added in bottom of city field. to choose the area under “Amsterdam”

please reply thank you!

and one more thing after customer place order that order goes to that particular city vendor and then he will fulfill that order

Jeroen Sormani April 23, 2019 at 9:46 am


You can add a conditional field with my Advanced Checkout Fields plugin.
This however does not allow for sending the order to a specific vendor – I think that’d require a customization to accomplish.


Mike April 24, 2019 at 3:56 pm

Great post! How would one make it so that if the customer doesn’t belong to one of the cities in your list, they can type in their city anyway? I run a local delivery service within a region and want to make it easier for locals to order, but also allow orders from cities from outside the region.

Jeroen Sormani April 24, 2019 at 4:28 pm

Hi Mike,

You could try and make the city field a enhanced field using SelectWoo for example and allow for user input that way 🙂


Dayan September 12, 2019 at 8:06 am

How to connect database to here?

Jeroen Sormani September 12, 2019 at 9:52 am


It is possible to get a list of cities from the database, but there’s not one way to get the values as it depends on where those are stored.
I’d recommend to get in touch with your developer for assistance if you’re unsure.


Anas October 28, 2019 at 10:12 pm

Hi, is it possible to add a Placeholder in options and also in the search box in options ?

Michael December 4, 2019 at 10:45 pm


i tried and works fine!! but, i dont know how can i modify also the “shipping address” and “billing address” on My Account section..

You know how do the same on this sections ?


Mario November 5, 2020 at 4:19 pm


Thank you for this amazing plugin. Is it possible to write just ‘Amsterdam’, instead of ‘amsterdam’ => ‘Amsterdam’

Thank you

Jeroen Sormani January 31, 2021 at 12:02 pm

Hi Mario,

Its possible, but would require a additional line to make sure the indices of the array are not numeric (e.g. if doing solely that and selecting Amsterdam it would give ‘0’ as the city in the admin).
Try adding something like $city_args['options'] = array_combine( $city_args['options'], $city_args['options'] ); (not tested).


GH January 30, 2021 at 8:54 pm

It’s working great.
Is there a way to make the search displaying only the cities that start with the typed character ?
If I type A I will see only Amsterdam.

Thank you

Jeroen Sormani January 31, 2021 at 11:58 am


The searchable field snippet should be close, when you type in a letter it shows all options that have that letter in it (not just at the start).


David January 31, 2021 at 6:07 pm

Hello Jeroen, Excellent code, txs. I use Woocommerce, shipping zones and cost to deliver options to integrate all different zones and the delivery cost. Also I use the “Shipping by City for Woocommerce” plugin . When using your code the dropdown shows up with the cities I configure in the code but seems that there is not integration with the list I create in Woocommerce/shipping zones… Is there any walk around to solve this?

Jeroen Sormani January 31, 2021 at 9:06 pm

Hi David,

I’m not familiar with that plugin, so unfortunately I can’t say too much about it, but I expect it is possible to customize the snippet further to pull the cities from the plugin.
If you’d like assistance on creating such customization, feel free to reach out through the contact form to discuss.


aladin March 15, 2021 at 6:00 pm


i tried and works fine!! but, i dont know how can i modify also the “shipping address” and “billing address” on My Account section..

Leave a Reply