本文详解如何通过 woocommerce_add_to_cart_fragments 钩子，为自定义购物车金额短代码（如 [quote-total]）添加 AJAX 实时刷新能力，确保在结账页（尤其是多步骤结账）中，当运费、优惠券等变动时，总价自动更新，无需页面重载。
本文详解如何通过 woocommerce_add_to_cart_fragments 钩子，为自定义购物车金额短代码（如 [quote-total]）添加 ajax 实时刷新能力，确保在结账页（尤其是多步骤结账）中，当运费、优惠券等变动时，总价自动更新，无需页面重载。
在 WooCommerce 多步骤结账等场景中，仅用静态短代码显示购物车总额（如 WC()->cart->total）会导致数据滞后——用户修改配送方式或输入优惠码后，金额不会自动变化，影响体验与准确性。WooCommerce 原生提供了一套轻量级 AJAX 更新机制，核心在于 woocommerce_add_to_cart_fragments 过滤器，它不仅用于购物车图标角标，还可灵活扩展至任意带特定 CSS 类的选择器。
首先，需为短代码输出的 HTML 元素添加唯一且可识别的 CSS 类，便于后续 JS 选择与替换：
add_shortcode('quote-total', 'get_quote_total');
function get_quote_total() {
$total = WC()->cart->total;
return '<div class="step-cart-total">' . wc_price($total) . '</div>';
}
// 使用方式：[quote-total]关键点在于 <div class="step-cart-total"> —— 此类名将成为 AJAX 更新的目标标识符。<p>接着，注册 <code>woocommerce_add_to_cart_fragments 钩子，在每次购物车状态变更（添加商品、更新数量、切换运费、应用优惠券等）时，动态生成最新金额 HTML 片段，并将其映射到对应选择器：
function custom_woocommerce_add_to_cart_fragments($fragments) {
ob_start();
$total = WC()->cart->total;
echo '<div class="step-cart-total">' . wc_price($total) . '</div>';
$fragments['.step-cart-total'] = ob_get_clean();
return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'custom_woocommerce_add_to_cart_fragments');⚠️ 注意事项：
- 该钩子依赖 WooCommerce 的前端事件系统（如
wc_cart_fragments_refresh），因此请确保主题未禁用或覆盖默认 cart.js； - 仅适用于前端已加载的元素；若
.step-cart-total在 AJAX 加载的步骤中动态插入（如 Tab 切换后渲染），需在插入后手动触发$(document.body).trigger('wc_fragment_refresh')； - 若需支持货币格式化一致性（如小数位、千分位），
wc_price()已内置处理，无需额外适配； - 此方案不涉及自定义 AJAX 请求或 PHP REST 端点，性能轻量、兼容性强，是 WooCommerce 官方推荐的碎片化更新模式。
最终效果：用户在结账页更改配送方式后，.step-cart-total 内容将毫秒级更新，与购物车全局状态完全同步，大幅提升多步骤流程的专业性与可信度。
