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

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 🙂

Cheers,
Jeroen

Dayan September 12, 2019 at 8:06 am

How to connect database to here?

Jeroen Sormani September 12, 2019 at 9:52 am

Hi,

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.

Cheers,
Jeroen

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

Hello,

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 ?

Thanks

Mario November 5, 2020 at 4:19 pm

Hello.

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).

Cheers,
Jeroen

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

Hi,

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).

Cheers,
Jeroen

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.

Cheers,
Jeroen

aladin March 15, 2021 at 6:00 pm

Hello,

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