WooCommerce如何根据账单地址字段变动自动更新配送方式

问题原因 #

你当前使用的代码仅绑定了地址字段的点击事件，仅在主动点击字段时才会触发配送方式更新，自然需要二次点击才能生效。

修改后代码 #

add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout() {
    if (is_checkout()) {
    ?>
    <script type="text/javascript">
        jQuery( document ).ready(function( $ ) {
            // 防抖函数，避免输入过程中频繁触发AJAX请求
            let debounceTimer;
            // 监听所有影响配送地址的字段，可根据实际需求增减字段
            const addressFields = '#billing_address_1, #billing_city, #billing_postcode, #billing_state, #billing_country';
            
            // 绑定三种事件：实时输入、字段失焦、下拉选项变更
            $(document).on('input blur change', addressFields, function() {
                clearTimeout(debounceTimer);
                // 输入停止300ms后触发更新，可自行调整延迟时长
                debounceTimer = setTimeout(() => {
                    jQuery('body').trigger('update_checkout', { update_shipping_method: true });
                }, 300);
            });
        });
    </script>
    <?php
    }
}

修改说明 #

• 扩大了监听字段范围，覆盖了所有会影响配送地址计算的字段，包括地址、城市、邮编、省份、国家
• 替换了单一的click事件，同时监听三种场景：用户实时输入内容、填写完字段失焦、选择下拉类地址选项（比如省份、国家选择）
• 增加了防抖逻辑，避免用户输入过程中频繁发送AJAX请求，减少服务器负载，300ms的延迟可根据实际体验调整

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