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
  • 6 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 ?

    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

    Leave a Reply