WooCommerce结账页切换配送方式后字段显隐失效，求技术指导

你的代码无法正常工作主要有几个关键问题，我来逐一拆解并给出修复方案：

问题分析 #

1. JS代码放置位置错误：你把jQuery代码直接写在了woocommerce_checkout_fields过滤器函数里，这个函数的作用是返回结账字段数组，在这里输出JS会导致代码被插入到页面的错误位置（比如表单字段的HTML中间），直接破坏页面结构，导致JS无法正确执行。
2. 页面刷新的方式不够合理：使用location.reload()重载整个页面体验很差，而且WooCommerce本身提供了专门的事件来局部刷新结账页面，不需要全页重载。
3. 代码健壮性不足：没有处理WC会话不可用或者未选中配送方式的情况，可能导致意外报错。

修复后的完整代码 #

第一步：处理字段的PHP逻辑 #

这段代码负责根据选中的配送方式移除对应的结账字段，逻辑和你原来的一致，但增加了健壮性判断：

add_filter('woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields');
function xa_remove_billing_checkout_fields($fields) {
    // 定义需要匹配的配送方式ID，方便后续维护
    $target_methods = [
        'free_shipping:1',
        'free_shipping:2',
        'local_pickup:3'
    ];

    // 确保WC会话已初始化，避免报错
    if (!WC()->session) {
        return $fields;
    }

    $chosen_shipping_methods = WC()->session->get('chosen_shipping_methods');
    // 检查是否有选中的配送方式
    if (empty($chosen_shipping_methods)) {
        return $fields;
    }

    $chosen_method = $chosen_shipping_methods[0];

    // 根据选中的配送方式移除对应字段
    if (in_array($chosen_method, ['free_shipping:1', 'local_pickup:3'])) {
        unset($fields['billing']['billing_address_1']);
        unset($fields['billing']['billing_address_2']);
    }

    if (in_array($chosen_method, ['free_shipping:2', 'local_pickup:3'])) {
        unset($fields['billing']['billing_pick_up']);
    }

    return $fields;
}

第二步：添加配送方式变更的JS逻辑 #

我们用WooCommerce原生的update_checkout事件来局部刷新结账页面，而不是全页重载，同时把JS放在正确的钩子中：

add_action('wp_footer', 'xa_update_checkout_on_shipping_change');
function xa_update_checkout_on_shipping_change() {
    // 只在结账页面加载这段JS，避免不必要的加载
    if (!is_checkout() || is_wc_endpoint_url()) {
        return;
    }
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
    // 监听配送方式单选框的变更事件
    $('form.checkout').on('change', 'input[name^="shipping_method"]', function() {
        // 触发WooCommerce的结账更新事件，局部刷新字段
        $(document.body).trigger('update_checkout');
    });
});
</script>
<?php
}

为什么这样修改？ #

• JS位置正确：通过wp_footer钩子加载JS，确保代码在页面底部、DOM加载完成后执行，不会出现元素找不到的问题，也不会破坏页面结构。
• 体验更流畅：使用update_checkout事件只会刷新结账页面的动态部分（比如字段、订单总额等），而不是重载整个页面，用户体验更好。
• 代码更健壮：增加了会话和选中状态的判断，避免在特殊场景下出现PHP报错。
• 更易维护：把配送方式ID放在数组里，后续修改只需要调整数组内容即可。

内容的提问来源于stack exchange，提问作者thecodedeveloper.com