How to Hide WooCommerce Shipping Fields if Local Pickup Shipping Method is Selected?

Sometimes, customers want to pick up their items in person and don’t need delivery. In such cases, showing them a shipping address form can be confusing or unnecessary. To simplify the process, store owners need to hide shipping fields for those opting for local pickup. While only those customers who prefer shipping their orders should be shown the shipping fields.

This post will help you to hide WooCommerce shipping fields if Local pickup shipping method is selected.

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Solution: Hide WooCommerce Shipping Fields if the Local Pickup Shipping Method is selected

Imagine a store owner operating an event ticketing website that sells tickets for both physical events (concerts) and virtual events (webinars). If a customer decides to buy tickets for a physical event, he may choose local pickup. In such a case, the code snippet below makes sure that the shipping fields are hidden on the checkout form. But if they change their mind and want the items delivered, then the shipping fields are displayed on the checkout form.

add_action( 'woocommerce_after_checkout_form', 'ts_disable_shipping_local_pickup' );
   
function ts_disable_shipping_local_pickup( $available_gateways ) {
     
   // Part 1: Hide shipping on checkout load
   $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
   $chosen_shipping = $chosen_methods[0];
   if ( 0 === strpos( $chosen_shipping, 'local_pickup' ) ) {
      wc_enqueue_js( "
         $('#ship-to-different-address input').prop('checked', false).change().closest('h3').hide();
      " );
   }
  
   // Part 2: Hide shipping on checkout shipping change 
   wc_enqueue_js( "
      $('form.checkout').on('change','input[name^=\"shipping_method\"]',function() {
         var val = $( this ).val();
         if (val.match('^local_pickup')) {
            $('#ship-to-different-address input').prop('checked', false).change().closest('h3').hide();
         } else {
            $('#ship-to-different-address input').prop('checked', true).change().closest('h3').show();
         }
      });
   " );  
}

Output 1

The below images show that the customer has chosen the ‘Local pickup’ option on the cart page. So, the code will hide the default Shipping fields available on the Checkout page.

Output 2

If any other shipping method is chosen on the cart page other than ‘Local pickup’, the default Shipping fields are available on the Checkout page.

Related Article: Hide Other WooCommerce Shipping Methods When Free Shipping is Available

Code Explanation

• The add_action function hooks into the woocommerce_after_checkout_form action, which means it executes the ‘ts_disable_shipping_local_pickup’ function after the checkout form is displayed.

• $chosen_methods retrieves the chosen shipping methods from the WooCommerce session.
• It then extracts the first chosen shipping method from the array and stores it in the $chosen_shipping variable.
• The if condition checks if the $chosen_shipping starts with ‘local_pickup’ (i.e. if the customer selected a local pickup shipping method).
• If ‘local_pickup’ is chosen, it uses JavaScript (enqueued with wc_enqueue_js) to uncheck the “Ship to a different address” checkbox, trigger a change event on it, and hide the nearest ‘h3’ element (which typically contains the shipping address form).
• The 2nd part of the code handles changes to the shipping method selection on the checkout page. It uses jQuery to monitor changes to any input with a name that starts with “shipping_method” within the checkout form.
• When a change is detected, it retrieves the value of the selected shipping method (val) and checks if it matches the pattern ‘^local_pickup’ (i.e., if a local pickup method is selected).
• If a local pickup method is selected, it again uses JavaScript to uncheck the “Ship to a different address” checkbox, trigger a change event on it, and hide the nearest ‘h3’ element (the shipping address form).
• If a non-local pickup method is selected, it checks the “Ship to a different address” checkbox, triggers a change event, and shows the ‘h3’ element (making the shipping address form visible again).

Conclusion

By using this code snippet, the shipping fields on the WooCommerce checkout form are hidden when a customer chooses the shipping method “Local Pickup”. With slight modifications to the code, you can dynamically apply discounts too when customers select “Local Pickup” during checkout. Depending on your needs, you can also add custom fields on the WooCommerce checkout page.

Let us know your feedback on how the code was useful or any other queries in the comment section.