如何将WooCommerce产品页面自定义字段设置为必填项

仅靠HTML的required属性没法彻底阻止未填字段时加购，因为WooCommerce的加购流程可能绕过前端验证，得同时做前端JS校验和后端PHP校验，具体步骤如下：

1. 修正前端字段代码 #

你原代码里的required"多了个引号，属于HTML语法错误，先修正这个，保证前端基础验证能正常触发：

function mic_custom_option() {
    global $product;
    $id = $product->get_id();
    if ($id == 14352){
        $value = isset( $_POST['_custom_option'] ) ? sanitize_text_field( $_POST['_custom_option'] ) : '';
        printf( 
            '<p><label>%s<input name="_custom_option" value="%s" class="form-control" id="_custom_option" required /></label></p>', 
            __( 'Enter ID: ', 'www-plugin-textdomain' ), 
            esc_attr( $value ) 
        );
    }
}
add_action( 'woocommerce_before_add_to_cart_button', 'mic_custom_option', 9 );

2. 添加前端JS验证 #

监听加购按钮点击事件，强制检查字段是否填写，没填就阻止提交并提示用户：

jQuery(document).ready(function($) {
    $('button.single_add_to_cart_button').on('click', function(e) {
        var customField = $('#_custom_option');
        if (customField.length && customField.val().trim() === '') {
            e.preventDefault();
            alert('请填写ID'); // 这里可以换成更友好的提示样式
            customField.focus();
        }
    });
});

把这段JS加到你的主题functions.php（用wp_add_inline_script）或者直接加到产品页面的自定义JS区域。

3. 添加后端PHP验证 #

前端验证可以被绕过，必须加后端校验，用WooCommerce的woocommerce_add_to_cart_validation钩子拦截：

function mic_custom_option_validation( $passed, $product_id, $quantity ) {
    // 只针对目标产品验证
    if ($product_id == 14352) {
        if ( empty( $_POST['_custom_option'] ) || trim( $_POST['_custom_option'] ) === '' ) {
            wc_add_notice( __( '请填写ID才能加入购物车', 'www-plugin-textdomain' ), 'error' );
            $passed = false;
        }
    }
    return $passed;
}
add_filter( 'woocommerce_add_to_cart_validation', 'mic_custom_option_validation', 10, 3 );

这样三重保障（修正后的HTML required、前端JS、后端PHP）就能彻底阻止未填字段时加购了。

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