如何限制WooCommerce购物车仅含单个商品但允许调整数量

核心思路 #

通过后端验证拦截不同商品的添加操作，同时保留同一商品的数量调整权限；配合前端优化提升用户体验。

1. 后端验证（必须，防止绕过前端限制） #

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

add_filter( 'woocommerce_add_to_cart_validation', 'restrict_cart_to_single_product', 10, 3 );
function restrict_cart_to_single_product( $passed, $product_id, $quantity ) {
    // 购物车为空时直接允许添加
    if ( WC()->cart->is_empty() ) {
        return $passed;
    }

    // 遍历购物车现有商品，判断是否与当前添加商品一致
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        if ( $cart_item['product_id'] !== $product_id ) {
            wc_add_notice( '购物车仅支持添加一门课程，请先移除现有课程再添加新的', 'error' );
            $passed = false;
            break;
        }
    }

    return $passed;
}

这段代码的作用：

• 购物车为空时，允许正常添加商品
• 购物车已有商品时，仅允许添加与现有商品ID一致的条目（即调整同一商品数量）
• 添加不同商品时，弹出错误提示并阻止操作

2. 前端优化（可选，提升用户体验） #

添加以下JavaScript代码到主题的自定义JS区域或通过插件注入：

jQuery(document).ready(function($) {
    // 检查购物车是否已有商品
    const hasCartItem = () => $('.woocommerce-cart-form .cart_item').length > 0;

    // 处理添加按钮状态
    const updateAddToCartButtons = () => {
        if (!hasCartItem()) {
            $('.single_add_to_cart_button').prop('disabled', false).removeClass('disabled').removeAttr('title');
            return;
        }

        const existingProductId = $('.woocommerce-cart-form .cart_item').data('product_id');
        $('.single_add_to_cart_button').each(function() {
            const btnProductId = $(this).data('product_id');
            if (btnProductId !== existingProductId) {
                $(this).prop('disabled', true).addClass('disabled').attr('title', '购物车已有课程，无法添加新的');
            } else {
                $(this).prop('disabled', false).removeClass('disabled').removeAttr('title');
            }
        });
    };

    // 页面加载时初始化按钮状态
    updateAddToCartButtons();

    // 购物车更新后重新检查按钮状态
    $(document.body).on('updated_cart_totals', updateAddToCartButtons);
});

这段代码的作用：

• 页面加载时自动禁用非当前购物车商品的添加按钮
• 购物车更新（修改数量、移除商品）后，实时同步按钮状态
• 给禁用按钮添加提示，明确告知用户无法添加的原因

验证效果 #

• 添加不同课程：弹出错误提示，无法加入购物车
• 调整已有课程数量：可正常修改并更新购物车
• 移除购物车课程后，所有添加按钮自动恢复可用

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