如何在WooCommerce中检测产品变体是否已加入购物车

我懂你的痛点！普通的产品ID对比逻辑在可变产品上完全行不通——毕竟购物车里存的是变体ID，而不是父产品的ID，再加上变体是AJAX动态加载的，常规方法根本抓不到正确的ID来对比。

先说说你原来的代码问题：它只遍历购物车对比父产品ID，但可变产品的购物车项对应的是具体变体的ID，所以哪怕用户加了某个变体到购物车，用父ID去查也会返回false。

解决方案：支持变体+父产品的检测函数 #

先写一个通用的检测函数，既能查单个变体是否在购物车，也能查父产品下有没有任何变体在购物车：

/**
 * 检测指定产品/变体是否已在购物车中
 * @param int $target_id 可以是父产品ID或变体ID
 * @return bool
 */
function woo_is_product_or_variant_in_cart( $target_id ) {
    // 先判断购物车是否存在，避免报错
    if ( ! WC()->cart || empty( WC()->cart->get_cart() ) ) {
        return false;
    }

    // 遍历购物车每一项
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $product_in_cart = $cart_item['data'];
        
        // 情况1：目标是变体ID，直接对比购物车项的ID
        if ( $product_in_cart->get_id() === $target_id ) {
            return true;
        }
        
        // 情况2：目标是父产品ID，检查购物车项是否是该父产品的变体
        if ( $product_in_cart->is_type('variation') && $product_in_cart->get_parent_id() === $target_id ) {
            return true;
        }
    }

    return false;
}

在PHP模板中直接使用 #

如果是在单个产品页面的模板里（比如single-product.php或者变体相关模板片段），可以直接调用这个函数：

// 示例1：检测指定变体ID是否在购物车
$target_variant_id = 123; // 替换成你要检测的变体ID
if ( woo_is_product_or_variant_in_cart( $target_variant_id ) ) {
    echo '<p class="cart-notice" style="color: #2ecc71;">这个变体已经在你的购物车里啦！</p>';
}

// 示例2：检测父产品下是否有任何变体在购物车
$parent_product_id = get_the_ID(); // 当前产品的父ID
if ( woo_is_product_or_variant_in_cart( $parent_product_id ) ) {
    echo '<p class="cart-notice" style="color: #2ecc71;">该产品的某个变体已经在购物车里啦！</p>';
}

针对AJAX加载变体的实时检测 #

因为变体是AJAX动态加载的，用户选择变体后要实时显示提示，需要结合JS和AJAX：

第一步：添加前端JS代码

可以把这段代码加到你的主题functions.php里，或者单独的JS文件中：

// 注册并加载自定义JS
add_action('wp_enqueue_scripts', 'enqueue_variant_cart_check_script');
function enqueue_variant_cart_check_script() {
    wp_enqueue_script(
        'variant-cart-check',
        get_stylesheet_directory_uri() . '/js/variant-cart-check.js', // 替换成你的JS文件路径
        array('jquery'),
        '1.0',
        true
    );
    // 传递WooCommerce AJAX URL给JS
    wp_localize_script('variant-cart-check', 'wc_cart_params', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}

然后在variant-cart-check.js里写监听逻辑：

jQuery(document).ready(function($) {
    // 监听变体选择完成事件
    $('form.variations_form').on('show_variation', function(event, variation) {
        const variantId = variation.variation_id;
        
        // 发送AJAX请求检测是否在购物车
        $.ajax({
            url: wc_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'check_variant_in_cart',
                variant_id: variantId
            },
            success: function(response) {
                // 先移除之前的提示
                $('.variant-cart-notice').remove();
                
                if (response === 'true') {
                    // 在变体信息下方添加提示
                    $('.single_variation').after('<p class="variant-cart-notice" style="color: green; margin-top: 10px;">这个变体已经在购物车里啦！</p>');
                }
            }
        });
    });

    // 取消选择变体时移除提示
    $('form.variations_form').on('hide_variation', function() {
        $('.variant-cart-notice').remove();
    });
});

第二步：添加AJAX后端处理函数

在主题functions.php里添加AJAX回调：

// 注册AJAX动作（登录/未登录用户都可用）
add_action('wp_ajax_check_variant_in_cart', 'check_variant_in_cart_callback');
add_action('wp_ajax_nopriv_check_variant_in_cart', 'check_variant_in_cart_callback');

function check_variant_in_cart_callback() {
    // 验证参数是否存在
    if (!isset($_POST['variant_id'])) {
        echo 'false';
        wp_die();
    }
    
    $variant_id = intval($_POST['variant_id']);
    // 调用之前写的检测函数
    $is_in_cart = woo_is_product_or_variant_in_cart($variant_id) ? 'true' : 'false';
    
    echo $is_in_cart;
    wp_die(); // 必须结束AJAX请求
}

这样用户选择变体后，页面会实时提示该变体是否已经在购物车里，完美解决AJAX加载变体的检测问题。

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