WC Ukr Shipping插件表单闪显后消失及必填校验问题求助

问题描述 #

• WC Ukr Shipping插件表单在页面加载时会先显示几秒再消失，手动添加display:none样式无法解决该闪烁问题
• “填写地址”的必填校验提示导致无法完成商品下单

相关代码片段 #

<div class="wcus-checkout-fields" style="display: none;"><h3>Вкажіть адресу доставки</h3> <div class=""><!----> <input type="hidden" name="wcus_np_billing_custom_address_active" value="0"> <div><p class="form-row form-row-wide validate-required"><span class="woocommerce-input-wrapper"><input type="hidden" name="wcus_np_billing_city" value="8d5a9813-391c-11dd-90d9-001a92567626"> <input type="hidden" name="wcus_np_billing_city_name" value="Кременчук"> <div class="zen-ui-select zen-ui-select-1"><div style="width: 0px; height: 0px; overflow: hidden;"><input type="hidden" value="8d5a9813-391c-11dd-90d9-001a92567626"></div> <div class="zen-ui-select__value"><span class="zen-ui-select__value-text">Кременчук</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51, 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6, 1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8, 1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"></path></svg></div> <div class="zen-ui-select__dropdown"><div class="zen-ui-select__search"><input type="text" placeholder="Введіть значення для пошуку" class="zen-ui-select__search-input"></div> <div class="zen-ui-select__options"><div class="zen-ui-select__option">
          Київ
        </div><div class="zen-ui-select__option zen-ui-select__option--current">
          </div></div></div></div></span></p> <p class="form-row form-row-wide validate-required woocommerce-invalid woocommerce-invalid-required-field" style="display: none;"><span class="woocommerce-input-wrapper"><input type="text" name="wcus_np_billing_custom_address" id="wcus_np_billing_custom_address" placeholder="Введіть адресу" class="input-text"></span></p></div></div></div>

问题截图 #

解决方案 #

一、解决表单加载闪烁问题 #

手动添加display:none无效是因为插件JS会在页面加载后动态修改样式，可通过以下方式解决：

1. 修改插件模板：找到插件目录下的 checkout 模板文件（通常路径为/wp-content/plugins/wc-ukr-shipping/templates/checkout/），找到包含wcus-checkout-fields的容器标签，添加!important强制隐藏：

   <div class="wcus-checkout-fields" style="display: none !important;">
   

2. 主题CSS覆盖：进入WordPress后台「外观→自定义→额外CSS」，添加优先级更高的样式：

   .wcus-checkout-fields {
       display: none !important;
   }
   

   插件JS触发显示时会自动覆盖该样式，不影响正常交互。
3. 延迟插件JS加载：使用缓存插件（如WP Rocket）或自定义代码，延迟WC Ukr Shipping的JS文件加载，直到页面完全渲染完成。

二、解决必填地址提示无法下单问题 #

从代码可见，wcus_np_billing_custom_address字段被标记为必填但默认隐藏，导致校验不通过，解决方法如下：

1. 检查插件配置：进入后台「WooCommerce→设置→配送→WC Ukr Shipping」，查找“自定义地址必填”开关，直接关闭（部分版本自带该配置）。
2. 通过钩子取消必填：在主题的functions.php文件中添加以下代码，强制移除该字段的必填属性：

   add_filter('woocommerce_checkout_fields', 'remove_custom_address_required');
   function remove_custom_address_required($fields) {
       if(isset($fields['billing']['wcus_np_billing_custom_address'])){
           $fields['billing']['wcus_np_billing_custom_address']['required'] = false;
       }
       return $fields;
   }
   

3. 修改插件核心逻辑：找到插件核心文件（如wc-ukr-shipping/includes/class-wcus-checkout.php），定位到地址字段的校验代码，仅在字段显示时添加validate-required类。

内容的提问来源于stack exchange，提问作者Євген Назаренко