将 WooCommerce 城市字段更改为前端和管理中的下拉列表

Posted 2023-05-07

【中文标题】将 WooCommerce 城市字段更改为前端和管理中的下拉列表

【英文标题】：Change WooCommerce city fields to a dropdown in frontend and admin

【发布时间】：2021-01-13 03:55:33

【问题描述】：

我已将城市字段添加为下拉列表，但我无法让它显示在后端。 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;

我尝试在下面添加过滤器，但没有成功。我错过了什么？

add_filter( 'woocommerce_customer_meta_fields', 'custom_override_default_address_fields' );

【参考方案1】：

以下将帐单和送货城市字段更改为下拉菜单

结帐城市字段 我的帐户编辑地址城市字段 管理单一订单页面：编辑帐单和送货城市字段 管理员用户页面：编辑帐单和送货城市字段

代码：

// 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;

代码在您的活动子主题（或活动主题）的functions.php 文件中。经过测试并且可以工作。

---

添加 - 其他帐单和运输字段

对于 WooCommerce 默认地址字段以外的其他账单和运输字段，您可以替换：

// 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;

通过以下 2 个挂钩函数：

// 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;

【讨论】：

现在这就是你提到的每个自定义代码应该包含在任何地方的方式：.Checkout city fields。 .我的帐户编辑地址城市字段。 .Admin Single Order 页面：编辑帐单和送货城市字段。 .Admin 用户页面：编辑帐单和送货城市字段。我的意思是只在结帐时添加代码有什么意义。我会将此代码作为我拥有的其他自定义字段的参考。

对于 WooCommerce 默认地址字段以外的其他字段，请使用 woocommerce_shipping_fields 和 woocommerce_shipping_fields 而不是 woocommerce_default_address_fields 挂钩，如 here 或 here 中所述

我创建了一个新字段。到目前为止一切都很好，但是在手动新订单“woocommerce_admin_shipping_fields”中，我已将类型设置为“文本”，并且新字段显示为下拉菜单。这是为什么呢？

好的，我让它工作了。我删除了“js_field-country select”类并保留了“short”类，现在它可以工作了。但是，该字段不会从用户那里提取保存的数据。

@BassamRadi 您的情况有些奇怪，因为 woocommerce_customer_meta_fields 挂钩显示并保存计费和运输用户字段...