根据Woocommerce中的送货方式显示或隐藏结账区域3

Question

我试图隐藏基于送货方式的结帐字段。

function premove_billing_checkout_fields($fields) { 
    global $woocommerce; 
    $chosen_methods = WC()->session->get('chosen_shipping_methods'); 
    $chosen_shipping = $chosen_methods[0]; 

    if($chosen_shipping === 'local_pickup:20') { 
     unset($fields['billing']['billing_postcode']); 
     unset($fields['billing']['billing_state']); 
     unset($fields['billing']['billing_country']); 
    } 

    if($chosen_shipping === 'wc_custom_shipping_pickpoint') { 
     unset($fields['billing']['billing_postcode']); 
     unset($fields['billing']['billing_address_1']); 
     unset($fields['billing']['billing_state']); 
    } 
    return $fields; 
} 
add_filter('woocommerce_checkout_fields', 
'premove_billing_checkout_fields', 990); 

此代码正在工作，但隐藏我需要刷新页面的字段。 如何使用Ajax隐藏字段？

Answer 1

你不需要任何Ajax来实现这一点。第一个功能将使所有必要的结帐字段不是“必需的”，因为这是有条件地显示/隐藏结账字段所必需的。第二个功能（主要是jQuery）将根据所选的发货方式显示/隐藏所需的字段。

下面是代码：

// Make some checkout fields not required (mandatory to show/hide fields) 
add_filter('woocommerce_default_address_fields', 'custom_default_checkout_fields', 10, 1); 
function custom_default_checkout_fields($address_fields) { 
    $custom_fields = array('country', 'address_1', 'address_2', 'state', 'postcode'); 
    foreach($custom_fields as $field) 
     $address_fields[$field]['required'] = false; 
    return $address_fields; 
} 

// Conditional Show hide checkout fields based on chosen shipping methods 
add_action('wp_footer', 'custom_checkout_field_script'); 
function custom_checkout_field_script() { 

    // HERE your shipping methods rate IDs 
    $local_pickup = 'local_pickup:20'; 
    $pickpoint = 'wc_custom_shipping_pickpoint'; 

    $required = esc_attr__('required', 'woocommerce'); 
    ?> 
    <script> 
     jQuery(function($){ 

      var shippingMethod = $('input[name^="shipping_method"]:checked'), // Choosen shipping method slug 
       required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>', // Required html 
       shippingChecked = $('input#ship-to-different-address-checkbox'); 

      // Custom function to show/hide fields 
      shippingChecked.change(function(){ 
       console.log('Shipping Checked: '+shippingChecked.prop('checked')); 
      }); 

      // Function that shows or hide imput select fields 
      function showHide(actionToDo='show', selector=''){ 
       if(actionToDo == 'show') 
        $(selector).show(function(){ 
         $(this).addClass("validate-required"); 
         $(this).removeClass("woocommerce-validated"); 
         $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field"); 
         if($(selector+' > label > abbr').html() == undefined) 
          $(selector+' label').append(required); 
        }); 
       else 
        $(selector).hide(function(){ 
         $(this).removeClass("validate-required"); 
         $(this).removeClass("woocommerce-validated"); 
         $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field"); 
         if($(selector+' > label > abbr').html() != undefined) 
          $(selector+' label > .required').remove(); 
        }); 
      } 

      // Initializing at start (Based on the chosen shipping method) 
      if(shippingMethod.val() == '<?php echo $pickpoint; ?>') // Chosen "Pick point" (Hiding "Delivery") 
      { 
       showHide('show','#billing_country_field'); 
       showHide('hide','#billing_address_1_field'); 
       showHide('hide','#billing_address_2_field'); 
       showHide('hide','#billing_postcode_field'); 
       showHide('hide','#billing_state_field'); 
      } 
      else if(shippingMethod.val() == '<?php echo $local_pickup; ?>') // Choosen "Local pickup" (Hidding "Take away") 
      { 
       showHide('show','#billing_address_1_field'); 
       showHide('show','#billing_address_2_field'); 
       showHide('hide','#billing_postcode_field'); 
       showHide('hide','#billing_state_field'); 
       showHide('hide','#billing_country_field'); 
      } 

      // When shipping method is changed (Live event) 
      $('form.checkout').on('change', 'input[name^="shipping_method"]', function() { 
       var shipMethod = $('input[name^="shipping_method"]:checked'); 
       if(shipMethod.val() == '<?php echo $pickpoint; ?>') 
       { 
        showHide('show','#billing_country_field'); 
        showHide('hide','#billing_address_1_field'); 
        showHide('hide','#billing_address_2_field'); 
        showHide('hide','#billing_postcode_field'); 
        showHide('hide','#billing_state_field'); 
       } 
       else if(shipMethod.val() == '<?php echo $local_pickup; ?>') 
       { 
        showHide('show','#billing_address_1_field'); 
        showHide('show','#billing_address_2_field'); 
        showHide('hide','#billing_postcode_field'); 
        showHide('hide','#billing_state_field'); 
        showHide('hide','#billing_country_field'); 
       } 
       else 
       { 
        showHide('show','#billing_address_1_field'); 
        showHide('show','#billing_address_2_field'); 
        showHide('show','#billing_postcode_field'); 
        showHide('show','#billing_state_field'); 
        showHide('show','#billing_country_field'); 
       } 
      }); 

      // When "shipping to different address" is changed (Live event) 
      $('input#ship-to-different-address-checkbox').click(function() { 
       var shipMethod = $('input[name^="shipping_method"]:checked'); 
       if(shipMethod.val() == '<?php echo $pickpoint; ?>' && shippingChecked.prop('checked') == true) 
       { 
        showHide('show','#billing_country_field'); 
        showHide('hide','#billing_address_1_field'); 
        showHide('hide','#billing_address_2_field'); 
        showHide('hide','#billing_postcode_field'); 
        showHide('hide','#billing_state_field'); 

        showHide('show','#shipping_country_field'); 
        showHide('hide','#shipping_address_1_field'); 
        showHide('hide','#shipping_address_2_field'); 
        showHide('hide','#shipping_postcode_field'); 
        showHide('hide','#shipping_state_field'); 
       } 
       else if(shipMethod.val() == '<?php echo $local_pickup; ?>' && shippingChecked.prop('checked') == true) 
       { 
        showHide('show','#billing_address_1_field'); 
        showHide('show','#billing_address_2_field'); 
        showHide('hide','#billing_postcode_field'); 
        showHide('hide','#billing_state_field'); 
        showHide('hide','#billing_country_field'); 

        showHide('show','#shipping_address_1_field'); 
        showHide('show','#shipping_address_2_field'); 
        showHide('hide','#shipping_postcode_field'); 
        showHide('hide','#shipping_state_field'); 
        showHide('hide','#shipping_country_field'); 
       } 
       else if(shippingChecked.prop('checked') == false) 
       { 
        showHide('show','#shipping_address_1_field'); 
        showHide('show','#shipping_address_2_field'); 
        showHide('hide','#shipping_postcode_field'); 
        showHide('hide','#shipping_state_field'); 
        showHide('hide','#shipping_country_field'); 
       } 
      }); 
     }); 
    </script> 
    <?php 
} 

代码放在您的活动子主题（或主题）的function.php文件或也以任何插件文件。

这是测试和工程上WooCommerce 3+