WooCommerce加入购物车后如何执行自定义函数更新变体数量显示

先修正原有代码的已知问题 #

你原有代码存在几处明显错误，先修正后再实现基础功能：

1. 计数函数变量名不匹配、拼写错误、无默认返回值的问题：

function product_cart_count( $variation_id ) {
    $cart_count = 0;    
    // 遍历购物车商品
    foreach( WC()->cart->get_cart() as $cart_item ){
        if ( $cart_item['variation_id'] == $variation_id ) {
            $cart_count = $cart_item['quantity'];
            break;
        }
    }
    return $cart_count;
}

2. 模板调用缺少输出，同时添加data-variation_id属性用于后续元素定位：

<span class="cart-count" data-variation_id="<?php echo esc_attr( $v_id ); ?>">
    <?php echo product_cart_count( $v_id ); ?>
</span>

方案1：使用woocommerce_add_to_cart_fragments实现全局自动更新 #

该方案符合WooCommerce原生逻辑，无需额外编写AJAX逻辑，适合变体数量较少的场景：

add_filter( 'woocommerce_add_to_cart_fragments', 'update_variation_cart_count_fragments', 10, 1 );
function update_variation_cart_count_fragments( $fragments ) {
    foreach( WC()->cart->get_cart() as $cart_item ) {
        $variation_id = $cart_item['variation_id'];
        if ( $variation_id > 0 ) {
            $selector = '.cart-count[data-variation_id="'. esc_attr( $variation_id ) .'"]';
            $fragments[ $selector ] = sprintf(
                '<span class="cart-count" data-variation_id="%s">%s</span>',
                esc_attr( $variation_id ),
                product_cart_count( $variation_id )
            );
        }
    }
    return $fragments;
}

该代码会在每次AJAX加入购物车、删除购物车商品触发片段刷新时，自动更新所有购物车内变体对应的计数展示。

方案2：自定义AJAX实现（适合大量变体场景） #

如果页面变体数量较多，方案1全量更新的性能开销较大，可以改用单独请求对应变体计数的方式，执行效率更高：

1. 先添加AJAX处理接口：

add_action( 'wp_ajax_get_variation_cart_count', 'get_variation_cart_count' );
add_action( 'wp_ajax_nopriv_get_variation_cart_count', 'get_variation_cart_count' );
function get_variation_cart_count() {
    $variation_id = isset( $_POST['variation_id'] ) ? intval( $_POST['variation_id'] ) : 0;
    wp_send_json_success( $variation_id > 0 ? product_cart_count( $variation_id ) : 0 );
}

2. 添加前端JS监听加入购物车事件，单独更新对应变体计数：

jQuery(document).on('added_to_cart', function(event, fragments, cart_hash, $button) {
    const variationId = $button.data('variation_id');
    if (!variationId) return;
    jQuery.ajax({
        url: wc_add_to_cart_params.ajax_url,
        type: 'POST',
        data: {
            action: 'get_variation_cart_count',
            variation_id: variationId
        },
        success: function(res) {
            if (res.success) {
                jQuery('.cart-count[data-variation_id="'+ variationId +'"]').text(res.data);
            }
        }
    });
});

将上述JS代码加入主题自定义JS文件即可，也可以通过wp_footer钩子输出到页面底部。

内容的提问来源于stack exchange，提问作者Ameen Ul Haq