Krusna Krusna - 1 year ago 172
PHP Question

Change town/city text field to Select Option field in checkout form

In Woocommerce, I would like to change Town/City text field in a select field option field.

What should i do?

Here is a screenshot:

enter image description here


Answer Source

You need first to change the field type from 'text' to 'select' using the dedicated hook woocommerce_default_address_fields. Then you have also to change the label and to and an options argument where you are going to set your towns in an array of key/values.

In this array, you will have a line by town separated by a coma.

Here is the code:

add_filter( 'woocommerce_default_address_fields' , 'customize_checkout_city_field' );
function customize_checkout_city_field( $address_fields ) {

    // Set HERE the cities (one line by city)
    $towns_cities_arr = array(
        '0' => __('Select your city', 'my_theme_slug'),
        'paris' => 'Paris',
        'versailles' => 'Versailles',
        'cannes' => 'Cannes',

    // Customizing 'billing_city' field
    $address_fields['city']['type'] = 'select';
    $address_fields['city']['class'] = array('form-row-last', 'my-custom-class'); // your class here
    $address_fields['city']['label'] = __('Town / city', 'my_theme_slug');
    $address_fields['city']['options'] = $towns_cities_arr;

    // Returning Checkout customized fields
    return $address_fields;


This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

The code is tested and fully functional.

Update: To add your custom class, replace in $address_fields['city']['class']… the class 'my-custom-class' by yours.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download