WooCommerce结账页切换国家时强制更新购物车价格问题求助

问题根因 #

WooCommerce 默认update_checkout事件触发后，后端仅会更新运费、税费、订单总额等结账页默认模块的DOM片段，你额外添加在结账页顶部的购物车产品单价区域不在默认更新范围内，因此触发事件后只有总额等内容更新，产品单价保持不变。手动刷新页面后整体重新拉取了页面数据，所以价格显示正常。

你当前的JS代码中定义的计时器逻辑完全没有被调用，属于冗余无效代码。

解决步骤 #

1. 后端添加自定义片段规则

将以下代码添加到你的WordPress主题functions.php文件或者自定义功能插件中：

// 自定义结账页更新时返回的片段，加入顶部购物车产品列表内容
add_filter('woocommerce_update_order_review_fragments', 'custom_checkout_cart_items_fragment');
function custom_checkout_cart_items_fragment($fragments) {
    ob_start();
    $cart = WC()->cart;
    
    // 以下代码和你当前结账页顶部购物车产品的渲染逻辑保持完全一致即可
    foreach ($cart->get_cart() as $cart_item_key => $cart_item) {
        $product = $cart_item['data'];
        if (!$product->exists() || $cart_item['quantity'] <= 0) continue;
        ?>
        <div class="checkout-cart-item">
            <span class="product-name"><?php echo esc_html($product->get_name()); ?></span>
            <span class="product-price"><?php echo wp_kses_post($cart->get_product_price($product)); ?></span>
            <!-- 其他你需要展示的产品信息，例如数量、SKU等 -->
        </div>
        <?php
    }
    $cart_content = ob_get_clean();
    
    // 此处选择器替换为你结账页顶部包裹购物车区域的外层容器的CSS选择器
    $fragments['.checkout-top-cart-wrapper'] = $cart_content;
    return $fragments;
}

2. 简化前端触发代码

替换你现有的JS代码为以下内容即可：

$('select#billing_country, select#shipping_country').on('change', function () {
    $(document.body).trigger('update_checkout');
});

注意事项 #

• 务必保证后端代码中填写的CSS选择器和你页面上购物车外层容器的选择器完全匹配，否则不会触发对应区域的更新
• 产品单价必须使用WooCommerce原生方法WC()->cart->get_product_price()输出，不要用产品原生的get_price()方法，前者会自动根据当前配送地址计算VAT等税费后输出正确价格
• 测试前清空WooCommerce缓存、主题缓存和浏览器缓存，避免旧规则生效

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