在结帐表单中将 town/city 文本字段更改为 Select 选项字段

Question

在 Woocommerce 中，我想更改 select 字段选项字段中的 Town/City 文本字段。

我该怎么办？

截图如下：

谢谢

Answer 1

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

请参考官方文档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。

Answer 2

您需要先将字段 type 从 'text' 更改为 'select' 使用专用钩子 woocommerce_default_address_fields。然后，您还必须更改 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 文件中或任何插件文件中。

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

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

参考文献：

Customizing checkout fields using actions and filters - Overriding core fields

在结帐表单中将 town/city 文本字段更改为 Select 选项字段

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

php

wordpress

select

woocommerce

checkout