WooCommerce结账页更改账单州/国家时如何通过JS/AJAX更新购物车？

问题根因 #

你当前的代码存在3个核心问题导致失效：

• 类添加时机错误：AJAX自动更新购物车插件的监听事件是页面加载初始化时就绑定到所有带qty类的元素，你是在国家/省份字段触发change事件后才添加qty类，此时插件已经完成了事件绑定，不会识别到后续新增类的元素
• 仅给billing_country字段添加了qty类，未给同监听的billing_state字段添加
• 未主动触发插件要求的更新钩子，部分插件需要额外触发指定事件才会执行购物车刷新逻辑

修正后的代码 #

替换你子主题functions.php中的原有代码即可：

add_action('wp_footer', 'billing_country_update_checkout', 50);
function billing_country_update_checkout() {
    if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
        jQuery(function($) {
            // 页面加载完成就给目标字段加qty类，确保插件能绑定到监听事件
            $('select#billing_state, select#billing_country').addClass('qty');
            // 字段变更时主动触发购物车更新事件
            $('select#billing_state, select#billing_country').change(function() {
                // 触发WooCommerce通用的更新购物车事件，适配绝大多数AJAX更新插件
                $(document.body).trigger('update_checkout');
                console.log('已触发结账页更新');
            });
        });
    </script>
    <?php
}

补充排查方案 #

如果替换代码后仍未生效，按以下顺序排查：

• 打开浏览器控制台，切换国家/省份时查看是否有JS报错，确认jQuery、WooCommerce结账依赖无加载冲突
• 排查是否存在缓存问题：清空网站页面缓存、浏览器本地缓存后再测试
• 检查你使用的AJAX购物车插件文档，若有指定的更新触发事件，将代码中的update_checkout替换为插件指定的事件名即可

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