WooCommerce结账页实现账单邮箱/手机号二选一必填
实现方案
现有代码仅完成了联系渠道下拉字段的新增,还缺两个关键逻辑:一是解除邮箱、手机号字段的默认双必填限制,二是绑定结账提交校验事件,按用户选择的渠道执行对应必填校验。
直接将以下完整代码替换原有代码即可实现需求:
// 调整结账页字段:新增联系渠道选择,取消邮箱/手机号默认必填属性 add_filter( 'woocommerce_checkout_fields' , 'wc_custom_email_phone_field_checkout' ); function wc_custom_email_phone_field_checkout( $fields ) { // 新增联系渠道选择下拉框 $fields['billing']['billing_contact'] = array( 'label' => __('商家联系您的方式', 'woocommerce'), 'required' => true, 'clear' => false, 'type' => 'select', 'options' => array( '' => __('请选择联系渠道', 'woocommerce'), 'email' => __('邮箱', 'woocommerce' ), 'phone' => __('手机号', 'woocommerce' ) ), 'priority' => 20, ); // 关闭邮箱、手机号的默认必填规则,后续通过自定义逻辑校验 $fields['billing']['billing_email']['required'] = false; $fields['billing']['billing_phone']['required'] = false; return $fields; } // 自定义结账提交校验逻辑 add_action('woocommerce_checkout_process', 'wc_validate_contact_field'); function wc_validate_contact_field() { $selected_contact = isset($_POST['billing_contact']) ? sanitize_text_field($_POST['billing_contact']) : ''; // 按选择分支做必填判断 if ( empty($selected_contact) ) { wc_add_notice( __('请选择商家联系您的渠道', 'woocommerce'), 'error' ); } elseif ( $selected_contact === 'email' && empty($_POST['billing_email']) ) { wc_add_notice( __('您选择了邮箱联系方式,请填写邮箱地址', 'woocommerce'), 'error' ); } elseif ( $selected_contact === 'phone' && empty($_POST['billing_phone']) ) { wc_add_notice( __('您选择了手机号联系方式,请填写手机号码', 'woocommerce'), 'error' ); } }
- 下拉选项新增了空值默认项,避免页面加载后默认选中email、用户无感知漏填的问题
- 联系渠道下拉字段本身设为必填,用户必须先选定渠道才能提交订单
- 校验逻辑使用WooCommerce原生报错方法,错误提示样式和系统原生提示完全统一,不存在样式兼容问题
- 所有提交参数做了基础安全过滤,避免恶意提交风险
内容的提问来源于stack exchange,提问作者wp-ap
相关产品推荐
相关产品推荐

