Flatsome主题：启用页面缓存且不缓存迷你购物车商品数量的方法

核心思路是用前端动态替换的方式保留页面缓存：让页面主体完全走WP-Rocket的静态缓存，仅通过AJAX实时获取并渲染购物车数量，既不牺牲缓存速度，又能展示正确的商品数量。

步骤1：给购物车数量添加动态标记（无需修改主题核心文件） #

通过WooCommerce钩子修改购物车数量的输出结构，给它加上专属类名，方便JS定位替换：

add_filter('woocommerce_widget_cart_content_count', 'add_dynamic_cart_count_class', 10, 1);
function add_dynamic_cart_count_class($count) {
    return '<span class="dynamic-cart-count">' . $count . '</span>';
}

将这段代码放到子主题的functions.php中（避免主题更新丢失修改）。

步骤2：添加AJAX获取购物车数量的后端逻辑 #

添加PHP函数处理AJAX请求，返回当前用户的购物车实际数量：

// 处理登录用户和游客的AJAX请求
add_action('wp_ajax_get_cart_count', 'return_dynamic_cart_count');
add_action('wp_ajax_nopriv_get_cart_count', 'return_dynamic_cart_count');

function return_dynamic_cart_count() {
    // 验证请求合法性
    check_ajax_referer('wc_cart');
    // 获取购物车数量
    $cart_count = WC()->cart->get_cart_contents_count();
    // 返回JSON格式数据
    wp_send_json(['count' => $cart_count]);
}

同样将这段代码放到子主题functions.php中。

步骤3：添加前端JS动态替换数量 #

添加JS代码，在页面加载和购物车更新时，自动拉取最新数量并替换页面上的静态缓存值：

// 页面加载完成后初始化购物车数量
document.addEventListener('DOMContentLoaded', updateCartCount);

// 监听WooCommerce购物车更新事件（比如添加/删除商品后）
document.body.addEventListener('updated_cart_totals', updateCartCount);

function updateCartCount() {
    // 调用WooCommerce的AJAX接口获取数量
    fetch(wc_cart_params.ajax_url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-WP-Nonce': wc_cart_params.nonce
        },
        body: 'action=get_cart_count'
    })
    .then(res => res.json())
    .then(data => {
        // 找到所有需要替换的数量元素并更新
        const countElements = document.querySelectorAll('.dynamic-cart-count');
        countElements.forEach(el => el.textContent = data.count);
    })
    .catch(err => console.error('获取购物车数量失败:', err));
}

可以把这段JS代码通过子主题的footer.php添加，或者用wp_enqueue_script注册加载（推荐后者，更规范）。

步骤4：WP-Rocket侧的设置保留 #

不要移除woocommerce_items_in_cart从Never Cache Cookie列表中——这个设置能保证未添加商品的游客加载缓存页面，而添加过商品的用户，页面仍会从缓存加载，仅通过JS动态修正购物车数量，不会影响整体缓存效率。

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