While the default free input field works great for most webshops, sometimes having a dropdown works better. Especially when your shipping rates are based on the customer city. In that scenario you don’t want to manage all the different ways a customer can type their city name. Making the city field a dropdown will resolve this.
Changing the City Field
To get started you can purchase, download and install the Advanced Checkout Fields plugin from our site. With this you can modify and control the checkout fields. The name ‘Advanced Checkout Fields’ may seem intimidating, but its made pretty straight forward. After installing the plugin, head over to the settings page that can be found under WooCommerce > Settings > Payments > Checkout Fields.
Create a new checkout configuration through the ‘Add new checkout field group’ button. This creates a new conditional configuration. The Advanced Checkout Fields plugin allows for configuring different configurations depending on conditions, so you can have different checkout fields for different scenarios.
In this situation we want to make the city field a dropdown. It makes sense to only have a dropdown with the available values for the country (or state) it relates to. It would make no sense to display a list of all the cities in the entire world or country if its bigger.
For the condition at the top I’d recommend to set it to ‘Country – Equal to – {Your country}’. WooCommerce automatically detects the country, so this is most applicable. Later on we also define field conditions which are more dynamic and allowing you to show different values based on the state for example.
Expanding the ‘City’ rows exposes the settings for the field. Select the ‘Searchable dropdown’ or ‘Dropdown’ as the field type, my recommendation is to use the searchable one as this is more functional and has a more modern look.
When changing the field type the additional field options will appear. Within these field option you can enter the choices of the dropdown. Enter one value per line.
Setup Different Cities per State/Country
Depending on your region a area can have a long list of cities. If you only want to show the relevant cities for a location you can also make the city field conditional based on another field. This is where field conditions come into play.
This feature allows for dynamically updating checkout fields based on another variable on the checkout page. In this case the city field can change based on the state selected.
You can duplicate the field and change the values accordingly so a different field with the appropriate city options will appear for the next region over.
Replicate These Steps for the Shipping Fields
In the above steps only the billing city field is modified. Make sure to replicate the same settings for the city field in the shipping section.