Change WooCommerce city fields to a dropdown in frontend and admin

Question

I have added the city field as a dropdown list but I can't get it to show up in the backend. https://ibb.co/3rdsQpY

/* city dropdown */

// UPDATE CHECKOUT CITY FIELD
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );
add_filter('woocommerce_admin_shipping_fields', 'custom_override_default_address_fields');// manual order


function custom_override_default_address_fields( $address_fields ) {

    // Billing City
    $address_fields['city']['type'] = 'select';
    $address_fields['city']['label'] = __('City', 'custom-domain');
    $address_fields['city']['priority'] = '41';
    $address_fields['city']['class'] = array('my-field-class form-row-last');
    $address_fields['city']['options'] = array(
       // '' => __( 'Select unit type' ),    /*= this will make empty field*/
        'Jeddah' => __('Jeddah', 'custom-domain'),
    );

    // Sort
    ksort($address_fields['city']['options']);


    return $address_fields;
}

I tried to add the filter below but it didn't work. what am I missing?

add_filter( 'woocommerce_customer_meta_fields', 'custom_override_default_address_fields' );

Answer 1

The following will change billing and shipping city fields to a dropdown on

• Checkout city fields
• My account edit address city fields
• Admin Single Order pages: edit billing and shipping city fields
• Admin Users pages: edit billing and shipping city fields

The code:

// Custom function that handle city options
function get_city_options() {
    $options = array(
        // '' => __( 'Select unit type' ),    /*= this will make empty field*/
        'Jeddah' => __('Jeddah', 'custom-domain'),
    );
    ksort($options);

    return $options;
}

// Checkout and my account (edit) billing and shipping city
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_city_fields' );
function custom_override_default_city_fields( $fields ) {
    $fields['city']['type'] = 'select';
    $fields['city']['class'] = array('my-field-class form-row-last');
    $fields['city']['input_class'] = array('state_select');
    $fields['city']['options'] = get_city_options();
    $fields['city']['priority'] = '41';

    return $fields;
}

// Admin editable single orders billing and shipping city field
add_filter('woocommerce_admin_billing_fields', 'admin_order_pages_city_fields');
add_filter('woocommerce_admin_shipping_fields', 'admin_order_pages_city_fields');
function admin_order_pages_city_fields( $fields ) {
    $fields['city']['type']    = 'select';
    $fields['city']['options'] = get_city_options();
    $fields['city']['class']   = 'short'; // Or 'js_field-country select short' to enable selectWoo (select2).

    return $fields;
}

// Admin editable User billing and shipping city
add_filter( 'woocommerce_customer_meta_fields', 'custom_override_user_city_fields' );
function custom_override_user_city_fields( $fields ) {
    $fields['billing']['fields']['billing_city']['type']    = $fields['shipping']['fields']['shipping_city']['type']  = 'select';
    $fields['billing']['fields']['billing_city']['options'] = $fields['shipping']['fields']['shipping_city']['options'] = get_city_options();

    return $fields;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

---

Addition - Other billing and shipping fields

For other billing and shipping fields than WooCommerce default addresses fields you can replace:

// Checkout and my account (edit) billing and shipping city
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_city_fields' );
function custom_override_default_city_fields( $fields ) {
    // … …
    return $fields;
}

by the 2 following hooked functions:

// For billing custom field (Checkout and my account edit addresses):
add_filter( 'woocommerce_billing_fields' , 'custom_override_billing_fields' );
function custom_override_billing_fields( $fields ) {
    $fields['billing_custom1'] = array(
        'type' => 'text', // chose the field type
        'label' =>  __('Custom label (billing)',  'woocommerce' ),
        'class' => array('form-row-wide'), // can be also 'form-row-first' or 'form-row-last'
        'required' => false, // Optional
        'clear' => true, // Optional
        'priority' => 200, // To change the field location increase or decrease this value
    );
    return $fields;
}

// For shipping custom field (Checkout and my account edit addresses):
add_filter( 'woocommerce_shipping_fields' , 'custom_override_shipping_fields' );
function custom_override_shipping_fields( $fields ) {
    $fields['shipping_custom1'] = array(
        'type' => 'text', // chose the field type
        'label' =>  __('Custom label (shipping)',  'woocommerce' ),
        'class' => array('form-row-wide'), // can be also 'form-row-first' or 'form-row-last'
        'required' => false, // Optional
        'clear' => true, // Optional
        'priority' => 200, // To change the field location increase or decrease this value
    );
    return $fields;
}