实现WooCommerce短码在AJAX加入购物车时自动刷新

你的代码核心问题有两个：

1. 调用短码函数时未传递商品ID参数，导致无法定位对应商品的购物车数量
2. woocommerce_add_to_cart_fragments要求返回完整HTML元素（带匹配选择器的标签），而非单纯数字

以下是修正后的完整代码：

1. 重构短码函数 #

让短码输出带唯一标识的HTML容器，关联商品ID：

if( ! function_exists('get_product_quantity_in_cart') ) {
    function get_product_quantity_in_cart( $atts ) {
        // 提取短码属性
        $atts = shortcode_atts( array(
            'id' => '',
        ), $atts, 'cart_qty_badge' );
        
        $product_id = absint($atts['id']);
        if( empty($product_id) || WC()->cart->is_empty() ) {
            return '<span class="cart-qty-badge" data-product-id="' . esc_attr($product_id) . '"></span>';
        }

        $total_qty = 0; 
        foreach ( WC()->cart->get_cart() as $cart_item ) {
            if( $cart_item['product_id'] == $product_id ) {
                $total_qty += $cart_item['quantity'];
            }
        }

        // 返回带容器的数量，确保AJAX可正确替换
        return '<span class="cart-qty-badge" data-product-id="' . esc_attr($product_id) . '">' . esc_html($total_qty) . '</span>';
    }
    add_shortcode( 'cart_qty_badge', 'get_product_quantity_in_cart' );
}

2. 修正AJAX片段更新逻辑 #

针对购物车中商品生成对应徽章HTML，同时处理空购物车场景：

add_filter( 'woocommerce_add_to_cart_fragments', 'refresh_cart_qty_badges' );
function refresh_cart_qty_badges( $fragments ){
    // 遍历购物车所有商品，生成对应徽章片段
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $product_id = $cart_item['product_id'];
        $fragments['.cart-qty-badge[data-product-id="' . esc_attr($product_id) . '"]'] = get_product_quantity_in_cart( array('id' => $product_id) );
    }

    // 购物车为空时清空所有徽章
    if( WC()->cart->is_empty() ) {
        $fragments['.cart-qty-badge'] = '<span class="cart-qty-badge" data-product-id=""></span>';
    }

    return $fragments;
}

关键说明 #

• 短码使用方式不变，例如[cart_qty_badge id="123"]（123为目标商品ID）
• 生成的徽章带cart-qty-badge类和data-product-id属性，AJAX通过该选择器精准定位更新元素
• 覆盖了添加商品、移除商品、清空购物车等所有AJAX操作场景

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