WooCommerce显示特定错误告警时如何禁用/启用结账按钮

问题说明 #

采购的B2B and Wholesale Suite插件存在规则逻辑漏洞：商品设置3件最低订购量后，购物车商品数量不足时仅弹出错误提示，仍允许用户跳转结账页面，联系开发者未得到响应，需要实现「存在数量错误提示时自动禁用结账按钮，无错误时启用按钮」的效果。

相关页面元素代码 #

数量错误提示结构：

<ul class="woocommerce-error" role="alert">
    <li>
        Your current order quantity total of Remedi Gin – 5cl is 2 — the minimum quantity you can order is 3
    </li>
</ul>

结账按钮结构：

<a href="https://www.mysite.co.uk/checkout/" class="checkout-button button alt wc-forward">
Proceed to checkout</a>

实现方案 #

方案分为前端交互控制+后端兜底拦截两部分，仅做前端按钮禁用可被技术手段绕过，必须搭配后端校验才能保证规则生效。

1. 前端动态控制结账按钮状态 #

将以下代码添加到主题自定义JS面板，或通过代码片段插件插入到站点前端：

jQuery(function($){
    // 按钮状态切换逻辑
    const setCheckoutBtnStatus = () => {
        const hasError = $('.woocommerce-error[role="alert"]').length > 0;
        const $checkoutBtn = $('.checkout-button.wc-forward');
        if(hasError){
            $checkoutBtn
                .addClass('disabled')
                .css({
                    'pointer-events': 'none',
                    'opacity': 0.5,
                    'cursor': 'not-allowed'
                })
                .removeAttr('href');
        }else{
            $checkoutBtn
                .removeClass('disabled')
                .css({
                    'pointer-events': 'auto',
                    'opacity': 1,
                    'cursor': 'pointer'
                })
                .attr('href', '/checkout/'); // 替换为自身站点实际结账页地址
        }
    }
    // 页面首次加载执行
    setCheckoutBtnStatus();
    // 监听购物车数量更新、AJAX刷新事件，变动后重新校验状态
    $(document.body).on('updated_cart_totals updated_checkout cart_page_refreshed', setCheckoutBtnStatus);
});

2. 后端兜底校验拦截 #

将以下代码添加到主题functions.php文件，或通过代码片段插件插入，防止用户直接输入结账页地址绕过前端限制：

// 结账流程触发前校验商品最低购买数量
add_action('woocommerce_check_cart_items', 'min_quantity_check_block_checkout');
add_action('woocommerce_before_checkout_process', 'min_quantity_check_block_checkout');
function min_quantity_check_block_checkout(){
    // 配置最低购买规则：格式为 [商品ID => 最低购买数量]，可配置多条
    $quantity_rules = [
        // 示例：ID为123的商品最低购买3件，请替换为实际商品ID和数量
        123 => 3
    ];
    foreach (WC()->cart->get_cart() as $item) {
        $pid = $item['product_id'];
        $current_qty = $item['quantity'];
        if (isset($quantity_rules[$pid]) && $current_qty < $quantity_rules[$pid]) {
            wc_add_notice(
                sprintf(
                    '商品「%s」当前购买数量为%d，该商品最低购买数量为%d，请调整购物车后再结账',
                    $item['data']->get_name(),
                    $current_qty,
                    $quantity_rules[$pid]
                ),
                'error'
            );
            // 拦截跳转，返回购物车页
            if(is_checkout()){
                wp_safe_redirect(wc_get_cart_url());
                exit;
            }
        }
    }
}

配置注意事项 #

• JS代码中结账页地址请替换为自身站点实际结账路径
• PHP代码中的商品ID、最低购买数量请根据实际商品配置修改，支持添加多条规则
• 两部分代码需同时部署，仅用前端代码无法完全阻断违规结账操作

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