将城镇/城市文本字段更改为结帐表单中的选择选项字段

Question

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:

Thanks

Answer 1

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.

---

References:

• Customizing checkout fields using actions and filters - Overriding core fields