有条件地定制WooCommerce结帐字段

3 回答

• 1

  @LoicTheAztec感谢您的回复，您给了我很大的帮助 . 如您所述，必填字段是问题所在 . 结果，我尝试使用下面的代码来解决问题 . 虽然它解决了所需字段的问题，但却导致字段标签无法显示 .

  add_filter( 'woocommerce_shipping_fields', 'customizing_shipping_fields_required' );
  function customizing_shipping_fields_required($fields) {
      $fields['shipping_first_name'] = array(
      'required'=>false
      );
      $fields['shipping_last_name'] = array(
      'required'=>false
      );
      $fields['shipping_company'] = array(
      'required'=>false
      );
      $fields['shipping_city'] = array(
      'required'=>false
      );
      $fields['shipping_address_1'] = array(
      'required'=>false
      );
      $fields['shipping_address_2'] = array(
      'required'=>false
      );
      $fields['shipping_postcode'] = array(
      'required'=>false
      );
      return $fields;
  }
  

  回复于 2024-04-29T09:34:14+08:00
• 1

  你在这一行上错过了“shipping_type”的引用：

  $("input[name='shipping_type'").on("change",function(){
  

  如果此修复程序无效：您是否在javascript控制台中出错？

  回复于 2024-04-29T09:34:14+08:00
• 0

  首先，当涉及相同的钩子时，你可以合并一些函数...然后你的jQuery脚本最好像下面的代码一样设置它（你的jQuery脚本中也有很多小错误）：

  // Customizing default checkout shipping fields
  add_filter( 'woocommerce_shipping_fields', 'customizing_shipping_fields' );
  function customizing_shipping_fields($fields){
  
      # 1. Remove shipping fields
      unset($fields['shipping_country']);
      unset($fields['shipping_state']);
  
      # 2. Customize shipping fields
      $label_fields = array(
          'first_name' => __('取件者 *'),  'last_name'  =>   __('手機號碼 *'),
          'company'    => __('店名 *'),    'city'        => __('服務編號 *'),
          'address_1'  => __('收件地址 *'), 'address_2' => __('預計來訪時間 *'),
      );
      foreach( $label_fields as $key => $value ){
          $fields['shipping_'.$key]['label'] = $value;
          $fields['shipping_'.$key]['id'] = 'shipping_'.$key;
      }
  
      # 3. Customize shipping fields required
      $required_fields = array( 'first_name', 'last_name', 'company', 'city', 
          'address_1', 'address_2', 'postcode');
      foreach( $required_fields as $key => $value )
          $fields['shipping_'.$key]['required'] = false;
  
      return $fields;
  }
  
  // Add a Custom radio field for shipping options
  add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
  function custom_shipping_radio_button( $checkout ) {
      # 1. CSS styling
      ?>
      <style>label.radio{ display:inline-block; margin-right:1em; }</style>
      <?php
  
      # 2. Add a custom radio field
      woocommerce_form_field( 'shipping_type', array(
          'type' => 'radio',
          'class' => array( 'form-row-wide' ),
          'label' => __('收件方式'),
          'options' => array(
              'shipping_1' => __('全家店到店'),
              'shipping_2' => __('指定地址'),
              'shipping_3' => __('自行取貨'),
          ),
      ), $checkout->get_value( 'shipping_type' ) );
  
      # 3. jQuery Script
      ?>
      <script type="text/javascript">
          jQuery(function($){
              $("input[name=shipping_type]").on("change",function(){
                  if($("#shipping_type_shipping_1").is(":checked")) {
                      $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeIn();
                  } else {
                      $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeOut();
                  }
                  if($("#shipping_type_shipping_2").is(":checked")) {
                      $("#shipping_postcode,#shipping_address_1").fadeIn();
                  } else {
                      $("#shipping_postcode,#shipping_address_1").fadeOut();
                  }
                  if($("#shipping_type_shipping_3").is(":checked")) {
                      $("#shipping_address_2_field_2").fadeIn();
                  } else {
                      $("#shipping_address_2_field_2").fadeOut();
                  }
              });
          });
      </script>
      <?php
  }
  

  代码位于活动子主题（或活动主题）的function.php文件中 .

  经过测试和工作 .

  ---

  现在，如果要隐藏带有标签的字段，您的jQuery脚本将是：

  <script type="text/javascript">
          jQuery(function($){
              $("input[name=shipping_type]").on("change",function(){
                  if($("#shipping_type_shipping_1").is(":checked")) {
                      $("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeIn();
                  } else {
                      $("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeOut();
                  }
                  if($("#shipping_type_shipping_2").is(":checked")) {
                      $("#shipping_postcode_field,#shipping_address_1_field").fadeIn();
                  } else {
                      $("#shipping_postcode_field,#shipping_address_1_field").fadeOut();
                  }
                  if($("#shipping_type_shipping_3").is(":checked")) {
                      $("#shipping_address_2_field_2").fadeIn();
                  } else {
                      $("#shipping_address_2_field_2").fadeOut();
                  }
              });
          });
      </script>
  

  经过测试和工作......

  但是您需要将字段设置为不需要，因为在提交数据时您将面临一些问题......这将迫使您进行一些其他更改以获得功能 . 但这将是一个新问题......

  回复于 2024-04-29T09:34:14+08:00