WooCommerce如何通过variation_ID动态获取购物车指定商品变体购买数量

PHP 是服务端执行语言，页面加载完成后无法直接接收前端变量更新，你可以通过 WordPress 原生 AJAX 接口实现无刷新的变体购物车数量查询，具体实现步骤如下：

第一步：服务端注册 AJAX 处理接口 #

将以下代码添加到你的主题 functions.php 文件或者自定义功能插件中：

<?php
// 注册AJAX接口，支持登录/未登录用户访问
add_action('wp_ajax_get_variation_cart_qty', 'get_variation_cart_qty');
add_action('wp_ajax_nopriv_get_variation_cart_qty', 'get_variation_cart_qty');
function get_variation_cart_qty() {
    // 安全校验
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'variation_cart_qty_nonce')) {
        wp_send_json_error('非法请求');
    }
    $variation_id = intval($_POST['variation_id']);
    $quantity = 0;
    // 遍历购物车查询对应变体数量
    foreach ( WC()->cart->get_cart() as $cart_item ) { 
        if ($cart_item['variation_id'] === $variation_id) {
            $quantity = $cart_item['quantity'];
            break;
        }
    }
    wp_send_json_success($quantity);
}

// 输出AJAX配置到前端页面
add_action('wp_footer', 'inject_variation_qty_ajax_config');
function inject_variation_qty_ajax_config() {
    if (is_product()) { // 仅在商品页加载
        ?>
        <script>
        window.variationQtyConfig = {
            ajaxUrl: "<?php echo admin_url('admin-ajax.php'); ?>",
            nonce: "<?php echo wp_create_nonce('variation_cart_qty_nonce'); ?>"
        }
        </script>
        <?php
    }
}
?>

第二步：修改前端显示结构与JS逻辑 #

1. 先修改你原来的商品页PHP渲染代码，保证数量容器无论是否有值都存在，方便JS动态更新：

<?php
$targeted_id = $product->get_id();
$init_quantity = 0;
// 页面初始加载时先取默认变体的数量，可根据需求调整初始值
foreach ( WC()->cart->get_cart() as $cart_item ) { 
    if( $cart_item['product_id'] == $targeted_id ){
        $init_quantity =  $cart_item['quantity'];
        break;
    }
}
?>
<a href="/cart/">
    <div class="qty_on_product">
        <i class="tb-icon tb-icon-shopping-cart on_product"></i>
        <span class="product-cart-items"><?php echo $init_quantity > 0 ? $init_quantity : ''; ?></span>
    </div>
</a>

2. 修改你的jQuery代码，在变体切换时发起AJAX请求更新数量：

jQuery(document).ready(function() {
    jQuery( '.variations_form' ).each( function() {
        jQuery(this).on( 'found_variation', function( event, variation ) {
            var variation_id = variation.variation_id;
            // 发起AJAX请求查询数量
            jQuery.ajax({
                url: window.variationQtyConfig.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'get_variation_cart_qty',
                    nonce: window.variationQtyConfig.nonce,
                    variation_id: variation_id
                },
                success: function(res) {
                    if (res.success) {
                        var qty = res.data;
                        // 数量大于0就显示，否则隐藏
                        if (qty > 0) {
                            jQuery('.product-cart-items').text(qty).show();
                        } else {
                            jQuery('.product-cart-items').hide();
                        }
                    }
                }
            })
        });
    });
});

注意事项 #

• 如果你开启了站点缓存，需要对应排除购物车相关AJAX请求的缓存，否则会出现数量不更新的问题
• 代码中的选择器可以根据你实际的页面结构调整，避免和其他元素冲突

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