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

【问题标题】：Change town/city text field to Select Option field in checkout form将城镇/城市文本字段更改为结帐表单中的“选择选项”字段
【发布时间】：2017-02-03 13:06:31
【问题描述】：

在 Woocommerce 中，我想在选择字段选项字段中更改城镇/城市文本字段。

我该怎么办？

这是截图：

谢谢

【问题讨论】：

标签： php wordpress select woocommerce checkout

【解决方案1】：

您首先需要使用专用钩子 @ 将字段 type 从 'text' 更改为 'select' 987654323@。然后，您还必须更改 label 和 options 参数，您将在 key/values 数组中设置城镇。

在这个数组中，您将有一个由逗号分隔的城镇。

代码如下：

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;

}

此代码位于您的活动子主题（或主题）的 function.php 文件中或任何插件文件中。

代码已经过测试并且功能齐全。

更新：要添加您的自定义类，请将 $address_fields['city']['class']… 中的类 'my-custom-class' 替换为您的。

参考资料：

Customizing checkout fields using actions and filters - Overriding core fields

【讨论】：

是的，还有一件事我想在这个字段中添加类。
是否可以在下拉列表中添加搜索字段？我有大约 500 个城镇供用户选择

【解决方案2】：

您可以通过操作和过滤器自定义结帐字段。

请参考官方文档here

    // Add these code in your theme's function.php
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

// Our hooked in function - $address_fields is passed via the filter!
function custom_override_default_address_fields( $fields) {

$fields['billing']['your_field']['options'] = array(
  'option_1' => 'Option 1 text',
  'option_2' => 'Option 2 text'
);
     return $fields;
}

如果您正在寻找插件，您可以使用 woocommerce 团队的checkout field editor。

【讨论】：