Question

我有一组结帐字段，其中包含包含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&nbsp;<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&nbsp;<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');
          });
         }
       });
   ");
}

但是我仍然收到验证错误。如何删除那些验证错误？我试过了，但无法弄清楚。

任何帮助将不胜感激。

Answer 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;
}

隐藏WooCommerce结帐字段后，删除所需的验证

1 个答案: