如何在JavaScript中获取WooCommerce购物车小计并适配Ajax更新

我刚好踩过类似的坑，给你个超省心的方案——不用折腾复杂的Ajax请求监听，直接利用WooCommerce自带的事件就能搞定！

核心问题其实很明确：WooCommerce用Ajax更新购物车时，会重新渲染小计这类DOM元素，你之前的JS逻辑只在页面首次加载时执行了一次，自然就跟不上更新后的状态了。我们只需要监听WooCommerce内置的购物车更新完成事件，每次Ajax结束后重新跑一遍你的计算逻辑就行。

第一步：封装你的自定义JS逻辑 #

在主题文件夹里新建一个js目录（没有的话直接创建），然后新建custom-cart.js文件，写入以下代码：

// 把你的小计计算/功能调整逻辑封装成函数
function adjustCartBySubtotal() {
    // 先获取最新的购物车小计元素，注意：选择器要根据你的主题调整！
    // 可以用浏览器开发者工具查看小计元素的类名，比如默认主题是 .cart-subtotal .woocommerce-Price-amount
    const subtotalElement = document.querySelector('.cart-subtotal .woocommerce-Price-amount');
    if (!subtotalElement) return; // 防止找不到元素报错

    // 把带货币符号的文本转成纯数字（去掉非数字和小数点的内容）
    const subtotal = parseFloat(subtotalElement.innerText.replace(/[^0-9.]/g, ''));

    // 这里写你的自定义功能逻辑，比如根据小计调整购物车功能
    if (subtotal >= 100) {
        // 示例：满100元显示免费配送提示
        const freeShipNotice = document.querySelector('.free-shipping-alert');
        if (freeShipNotice) freeShipNotice.style.display = 'block';
    } else {
        const freeShipNotice = document.querySelector('.free-shipping-alert');
        if (freeShipNotice) freeShipNotice.style.display = 'none';
    }
}

// 页面首次加载时先执行一次
document.addEventListener('DOMContentLoaded', adjustCartBySubtotal);

// 监听WooCommerce购物车Ajax更新完成事件
// 每次增减商品、移除商品、更新购物车后，这个事件都会自动触发
document.body.addEventListener('updated_cart_totals', adjustCartBySubtotal);

第二步：把JS文件加载到购物车页面 #

打开主题的functions.php文件，添加以下代码，确保脚本只在购物车页面加载：

function enqueue_custom_cart_script() {
    // 仅在购物车页面加载我们的自定义脚本
    if ( is_cart() ) {
        wp_enqueue_script(
            'custom-cart-logic',
            get_stylesheet_directory_uri() . '/js/custom-cart.js',
            array('jquery'), // 如果你的逻辑用到jQuery，就保留这个依赖
            '1.0',
            true // 放在页面底部加载，优化性能
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_cart_script');

关键提示 #

• 选择器适配：一定要根据你当前主题的购物车页面，用浏览器开发者工具找到小计元素的正确选择器，不然获取不到数值就白搭了。
• 官方事件靠谱：updated_cart_totals是WooCommerce官方提供的标准事件，专门用于购物车总计更新完成后的回调，完全不需要自己去监听Ajax请求的状态，省心又兼容。
• 灵活扩展：你可以把自己原来的PHP触发的JS逻辑，全部迁移到这个函数里，只要涉及到依赖小计的操作，都能通过这个事件确保每次Ajax更新后重新执行。

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