我有一组结帐字段,其中包含包含3个选项的选择字段。当客户转到WooCommerce结帐页面时,最初我将隐藏字段(billing_address_1,billing_address_2,billing_city_field)。默认情况下,这些字段是必需的。因此,当我尝试基于一个自定义选择选项字段隐藏字段时,并且当用户单击“下订单”按钮时,会抛出所需的验证。
这是我所期望的:
以上操作正常,但问题是即使隐藏了字段仍显示验证错误。
下拉html代码段:
<p class="form-row form-row-wide validate-required thwcfe-input-field-wrapper validate-required woocommerce-validated" id="delivery_mode_field" data-priority="20" data-rules="" data-rules-action="" data-validations="validate-required"><label for="delivery_mode" class="">Delivery Mode <abbr class="required" title="required">*</abbr></label> <span class="woocommerce-input-wrapper"><select name="delivery_mode" id="delivery_mode" class="select thwcfe-input-field thwcfe-price-field thwcfe-price-option-field thwcfe-enhanced-select select2-hidden-accessible enhanced" data-placeholder="Delivery Mode" data-price-label="Delivery Mode" data-taxable="no" data-tax-class="" tabindex="-1" aria-hidden="true">
<option value="upload only" data-price="100" data-price-type="">
Upload only - Safe office custody (+₹100.00)
</option>
<option value="registered post" data-price="175" data-price-type="">
Registered India Post (+₹175.00)
</option>
<option value="speed post" data-price="200" data-price-type="">
Speed Post (+₹200.00)
</option>
<option value="special courier" data-price="250" data-price-type="">
Professional Courier (+₹250.00)
</option>
</select> <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" style="width: 576px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-delivery_mode-container"><span class="select2-selection__rendered" id="select2-delivery_mode-container" title="Registered India Post (+₹175.00)"><span class="select2-selection__clear">×</span>Registered India Post (+₹175.00)</span> </span></span> </span></span></p>
Billing Street Address html代码段:
<p class="form-row address-field validate-required thwcfe-input-field-wrapper validate-required form-row-wide woocommerce-invalid woocommerce-invalid-required-field" id="billing_address_1_field" data-priority="60" data-rules="" data-rules-action="" data-validations="validate-required">
<label for="billing_address_1" class="">Street address <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper"><input type="text" class="input-text thwcfe-input-field" name="billing_address_1" id="billing_address_1" placeholder="House number and street name" value="" autocomplete="address-line1"></span></p>
functions.php
add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_checkout_field', 9999 );
function conditionally_hide_show_checkout_field() {
wc_enqueue_js( "
jQuery('#billing_address_1').hide(function(){
jQuery(this).removeClass('validate-required');
jQuery(this).removeClass('woocommerce-validated');
});
jQuery('#delivery_mode').on('change', function() {
if (jQuery(this).val() !== 'upload only') {
jQuery('#billing_address_1').show(function() {
jQuery(this).addClass('validate-required');
});
} else {
jQuery('#billing_address_1').hide(function(){
jQuery(this).removeClass('validate-required');
jQuery(this).removeClass('woocommerce-validated');
});
}
});
");
}
但是我仍然收到验证错误。如何删除那些验证错误?我试过了,但无法弄清楚。
任何帮助将不胜感激。
答案 0 :(得分:1)
要从地址字段中删除验证,请在functions.php文件中添加以下代码
// Make address field optional
add_filter( 'woocommerce_default_address_fields' , 'nm_set_address_optional' ,99999 );
function nm_set_address_optional( $b_fields ) {
$b_fields['address_1']['required'] = false;
$b_fields['address_2']['required'] = false;
$b_fields['city']['required'] = false;
return $b_fields;
}