WooCommerce结账页billing_address_2值为10+时如何禁用下单按钮

现有代码问题说明 #

你当前编写的PHP代码无法实现预期效果，核心原因如下：

• PHP是服务端语言，仅在页面首次渲染/后端接收POST请求时执行，无法实时响应前端用户的下拉框选择操作
• 用户未提交表单时$_POST['billing_address_2']参数不存在，判断逻辑永远不会触发
• 仅靠服务端渲染修改按钮无法实现状态实时切换，用户选择其他选项后无法恢复按钮可用状态

完整修改方案 #

1. 前端JS实现实时控制（核心逻辑） #

新增JS代码监听下拉框变化，实时调整下单按钮状态，代码可添加到主题footer.php文件，或通过wp_enqueue_script挂载到结算页：

jQuery(document).ready(function($){
    // 监听下拉框选择变化
    $('form.checkout').on('change', 'select#billing_address_2', function(){
        checkAddress2Value();
    });
    // 监听结算页自动更新事件，避免刷新后状态丢失
    $('body').on('updated_checkout', function(){
        checkAddress2Value();
    });

    function checkAddress2Value(){
        var selectVal = $('select#billing_address_2').val();
        var placeOrderBtn = $('#place_order');
        if(selectVal == '10+'){
            // 禁用按钮
            placeOrderBtn.prop('disabled', true).css({
                'background': 'Silver !important',
                'color': 'white !important',
                'cursor': 'not-allowed !important'
            });
        } else {
            // 恢复按钮可用
            placeOrderBtn.prop('disabled', false).removeAttr('style');
        }
    }
});

2. 服务端二次校验（防止绕过前端限制） #

前端JS可被用户篡改，必须增加服务端校验兜底，替换你原来的按钮过滤代码即可：

// 服务端渲染按钮时判断状态
add_filter('woocommerce_order_button_html', 'disable_place_order_button_html', 10, 1);
function disable_place_order_button_html( $button ) {
    // 仅POST提交时判断参数，避免首次加载报错
    if( isset($_POST['billing_address_2']) && $_POST['billing_address_2'] == '10+' ) {
        $style  = 'style="background:Silver !important; color:white !important; cursor: not-allowed !important; text-align:center;"';
        $text   = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );
        $button = '<a class="button" '.$style.'>' . $text . '</a>';
    }
    return $button;
}

// 服务端结账拦截，彻底避免绕过前端提交订单
add_action('woocommerce_checkout_process', 'validate_billing_address2_for_checkout');
function validate_billing_address2_for_checkout(){
    if( isset($_POST['billing_address_2']) && $_POST['billing_address_2'] == '10+' ){
        wc_add_notice( __('所选人数暂不支持在线下单，请联系客服处理', 'woocommerce'), 'error' );
    }
}

3. 下拉框代码无需修改 #

你当前编写的billing_address_2下拉框实现逻辑正常，不需要调整。

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