基于所选国家设置WooCommerce结账账单邮编默认值及自动更新问题

问题根源 #

你的现有代码仅在页面首次加载时通过PHP钩子初始化字段配置，但WooCommerce结账页面的国家切换是前端动态交互（通过AJAX更新字段），切换国家后PHP逻辑不会重新执行，因此必须刷新页面才能看到变化。要实现实时更新，需要结合PHP字段配置和前端JavaScript监听两部分。

完整解决方案 #

1. 修正PHP代码

移除冗余的钩子调用，确保无论条件是否满足都返回字段数组，同时处理非哥伦比亚（CO）时的字段状态：

add_filter('woocommerce_billing_fields', 'custom_billing_postcode_based_on_country');

function custom_billing_postcode_based_on_country($fields) {
    // 仅在结账页面生效
    if (!is_checkout()) return $fields;

    $target_country = 'CO';
    $current_country = WC()->customer->get_billing_country();

    // 针对哥伦比亚设置默认邮编和只读状态
    if ($current_country === $target_country) {
        $fields['billing_postcode']['default'] = '80100';
        $fields['billing_postcode']['custom_attributes'] = [
            'readonly' => 'readonly',
            'disabled' => 'disabled'
        ];
    } else {
        // 其他国家清空默认值，恢复可编辑状态
        $fields['billing_postcode']['default'] = '';
        unset($fields['billing_postcode']['custom_attributes']);
    }

    return $fields;
}

2. 添加前端JavaScript监听

通过JS监听国家选择框的变化，实时更新邮编字段的状态和值：

jQuery(document).ready(function($) {
    // 监听账单国家字段变化
    $('body').on('change', '#billing_country', function() {
        var selectedCountry = $(this).val();
        var postcodeField = $('#billing_postcode');

        if (selectedCountry === 'CO') {
            // 设置默认邮编，禁用并只读
            postcodeField.val('80100').attr('readonly', true).attr('disabled', true);
        } else {
            // 清空值，恢复可编辑
            postcodeField.val('').removeAttr('readonly').removeAttr('disabled');
        }
    });

    // 页面加载时初始化状态（针对已保存的用户国家）
    var initialCountry = $('#billing_country').val();
    var postcodeField = $('#billing_postcode');
    if (initialCountry === 'CO') {
        postcodeField.val('80100').attr('readonly', true).attr('disabled', true);
    }
});

代码说明 #

• PHP部分：通过woocommerce_billing_fields钩子统一处理字段配置，确保页面加载时正确初始化字段状态，同时兼容用户已保存的账单国家。
• JS部分：监听国家选择框的change事件，实时切换邮编字段的状态，无需刷新页面；同时在页面加载时执行一次初始化，保证已保存国家的用户能看到正确状态。

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