如何在WooCommerce结账页面根据所选国家隐藏state（州/省）字段

实现方案 #

你原来的代码是后端渲染阶段固定隐藏/删除字段，无法响应前端的国家选择操作，需要结合前端动态监听+后端字段配置+提交验证三部分实现需求，完整代码如下：

1. 替换原有PHP代码 #

移除全局隐藏state字段的CSS，保留state字段不被删除：

add_filter('woocommerce_billing_fields', 'customize_checkout_fields', 100 );
function customize_checkout_fields( $fields ) {
    if ( is_checkout() ) {
        // 保留需要的字段，仅移除除state、country之外的其他账单字段
        $chosen_fields = array('first_name', 'last_name', 'address_1', 'address_2', 'city', 'postcode');
        foreach( $chosen_fields as $key ) {
            if( isset($fields['billing_'.$key]) ) {
                unset($fields['billing_'.$key]);
            }
        }
    }
    return $fields;
}

2. 添加前端动态控制逻辑 #

监听结账页国家选择事件，动态切换state字段的显示状态和必填属性：

add_action( 'woocommerce_before_checkout_form', 'dynamic_control_state_field', 5 );
function dynamic_control_state_field() {
    ?>
    <script>
    jQuery(function($){
        // 页面加载完成后先执行一次状态判断
        toggleStateField();
        // 监听国家切换事件
        $('body').on('change', '#billing_country', function(){
            toggleStateField();
        });

        function toggleStateField(){
            var selectedCountry = $('#billing_country').val();
            var stateField = $('#billing_state_field');
            // 意大利国家代码为IT，法国为FR
            if(selectedCountry === 'IT'){
                stateField.show().addClass('validate-required');
                stateField.find('input').prop('required', true);
            } else if(selectedCountry === 'FR'){
                stateField.hide().removeClass('validate-required');
                stateField.find('input').prop('required', false).val('');
            }
        }
    });
    </script>
    <?php
}

3. 添加后端提交验证 #

避免用户绕过前端JS提交不符合规则的数据：

add_action('woocommerce_checkout_process', 'validate_state_field_by_country');
function validate_state_field_by_country() {
    $country = isset($_POST['billing_country']) ? sanitize_text_field($_POST['billing_country']) : '';
    $state = isset($_POST['billing_state']) ? sanitize_text_field($_POST['billing_state']) : '';
    // 选意大利时state不能为空
    if($country === 'IT' && empty($state)){
        wc_add_notice( '请选择意大利对应的州/省信息', 'error' );
    }
}

注：国家代码使用ISO 3166-1 alpha-2标准，如果你站点的国家配置使用其他编码格式，对应替换代码中的IT、FR即可。

内容的提问来源于stack exchange，提问作者Alessandro Valori