WooCommerce条件必填结账字段：仅COD支付时生效

你的问题核心在于后端默认强制校验字段必填，同时前端仅控制了样式类，没有同步处理HTML必填属性和后端校验逻辑。下面是完整的修复方案：

1. 修复字段添加逻辑（取消默认必填） #

修改添加自定义字段的代码，把required设为false，因为我们要动态控制必填状态：

/* Add extra field (默认不强制必填) */
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields($fields)
{
    $fields['billing_options'] = array(
        'label'       => __('– EAN-nummer – ', 'woocommerce'),
        'placeholder' => _x('EAN nummer', 'placeholder', 'woocommerce'),
        'required'    => false, // 取消默认必填，改为动态控制
        'clear'       => false,
        'type'        => 'text',
        'class'       => array('my-css')
    );
    return $fields;
}

2. 完善前端动态控制逻辑 #

更新JS代码，不仅添加/移除validate-required类，还要同步设置字段的required属性，同时修正原代码中初始化判断的逻辑错误：

/* 仅在选择COD时显示并设置字段为必填 */
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var paymentInputs = 'input[name="payment_method"]',
                checkedPayment = paymentInputs + ':checked',
                targetField = '#billing_options_field',
                targetInput = '#billing_options'; // 字段输入框的选择器

            // 显示/隐藏并控制必填状态的函数
            function toggleField( action = 'show' ){
                if( action == 'show' ){
                    $(targetField).show(200);
                    $(targetField).addClass("validate-required");
                    $(targetInput).prop('required', true); // 设置HTML必填属性
                } else {
                    $(targetField).hide(200);
                    $(targetField).removeClass("validate-required");
                    $(targetInput).prop('required', false); // 移除HTML必填属性
                }
                // 清除校验状态
                $(targetField).removeClass("woocommerce-validated");
                $(targetField).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // 初始化：根据当前选中的支付方式处理字段
            if( $(checkedPayment).val() === 'cod' ){
                toggleField('show');
            } else {
                toggleField('hide');
            }

            // 支付方式切换时触发
            $( 'form.checkout' ).on( 'change', paymentInputs, function() {
                if( $(checkedPayment).val() === 'cod' ){
                    toggleField('show');
                } else {
                    toggleField('hide');
                }
            });
        });
    </script>
    <?php
    endif;
}

3. 添加后端校验逻辑（关键） #

前端控制只是视觉和HTML层面，必须添加后端校验，确保只有选择COD时才检查字段是否填写：

/* 后端校验：仅在选择COD时检查字段是否必填 */
add_action('woocommerce_checkout_process', 'cod_only_billing_options_validation');
function cod_only_billing_options_validation() {
    // 获取当前选择的支付方式
    $chosen_payment_method = WC()->session->get('chosen_payment_method');
    
    // 如果选择COD且字段为空，添加错误提示
    if ( $chosen_payment_method === 'cod' && empty($_POST['billing_options']) ) {
        wc_add_notice( __('请填写EAN-nummer字段。', 'woocommerce'), 'error' );
    }
}

额外补充：同步支付方式到会话 #

WooCommerce在结账页切换支付方式时，需要确保会话中保存当前选中的支付方式，否则后端可能无法正确获取。如果你的站点存在这个问题，可以添加以下代码：

/* 同步支付方式到会话 */
add_action('woocommerce_checkout_update_order_review', 'update_chosen_payment_method_session');
function update_chosen_payment_method_session($posted_data) {
    parse_str($posted_data, $output);
    if (isset($output['payment_method'])) {
        WC()->session->set('chosen_payment_method', $output['payment_method']);
    }
}

原代码无效的原因 #

• 原代码中required => true让WooCommerce后端始终校验该字段，即使前端隐藏了，提交订单时还是会报错。
• 仅添加/移除validate-required类只能控制前端样式和JS校验，无法绕过后端的强制校验。
• 初始化逻辑中判断条件写反，原代码错误地在选择COD时隐藏字段，现已修正。

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