How to Customize Checkout Fields Based on Shipping Methods – WooCommerce (with Video)

Last updated - April 28, 2021

If you have an online store, you might want to customize checkout fields based on shipping methods. For example, you’ll need the complete customer address for a flat rate shipping delivery option. But if the customer chooses the local pickup option, you don’t need to collect the customer’s street address.

That’s when you might want to remove some fields from your checkout page based on shipping methods chosen by the customer. But WooCommerce doesn’t offer conditional checkout field customization right out of the box.

In this article, we’ll explore how you can hide checkout fields based on shipping methods, with and without using a plugin.

Using the Flexible Checkout Fields Pro WooCommerce Plugin

The Flexible Checkout Fields Pro WooCommerce plugin offers one of the best conditional field customization for WooCommerce. You can get a single site license for $59.

After installing the plugin, a “Checkout Fields” tab will be added to your WordPress dashboard. Click it and head to the “Shipping” section. This page lists all the fields available on your checkout page. You can customize each of the fields individually.

Then, follow these steps:

1. Expand the field(s) which you want to hide.
2. Click the “Advanced” tab.
3. Check the “Enable Shipping Methods Login” setting.
4. From the dropdown below, choose the “Hide this field if” option since we’re trying to hide a particular option. You can choose the “Show this field if” option if you want certain fields to only appear for certain shipping methods.
5. Click the “Add rule” button. Two new dropdowns will become available.
6. From the first dropdown, select the shipping zone for which you want to hide the checkout field.
7. From the second dropdown, select the shipping method for which you want to hide the checkout field.
8. Make the same settings for any other field you want to hide.

For example, if you select the “Hide this field if” option along with the “Local pickup” shipping method for the “Street address” field, customers who select the local pickup shipping method won’t see and need to fill the street address fields.

Using a Custom Code Snippet

Instead of using a plugin, you can insert a custom code snippet to hide certain checkout fields based on shipping methods. Note that this method is a slightly complicated compared to using a plugin, and that you shouldn’t use it if you’re not comfortable working with code.

With that said, here’s the code snippet:

add_filter('woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields');

function xa_remove_billing_checkout_fields($fields) {
$shipping_method ='free_shipping:1'; // Value of the applicable shipping method.
global $woocommerce;
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping = $chosen_methods[0];

if ($chosen_shipping == $shipping_method) {
unset($fields['billing']['billing_address_1']); // Value of field name to be hidden
unset($fields['billing']['billing_address_2']);
}
return $fields;
}

Here are the steps to insert the code snippet:

1. Head to Appearance > Theme editor in your WordPress dashboard.
2. Click the “Theme functions (functions.php)” section on the right.
3. Paste the code snippet in the bottom of the area containing the rest of the code.
4. You need to customize the code according to your needs by replacing the shipping method and checkout fields values.
5. The shipping method value is by default free_shipping:1 in the code snippet. And the default field values to be hidden are billing_address_1 and billing_address_2.
6. Replace the default shipping method value with the value of the shipping method for which you wish to hide checkout fields.
7. To get the value, head to your checkout page. Highlight the shipping method text, right click, and click “Inspect”.
8. A new window will open on the right with the code related to your selected shipping method highlighted.
9. Note down the text that appears after value= and is placed between the quotation marks. (Do not copy the quotation marks). For our local pickup example, it’s local_pickup:2.
10. Then head back to the theme editor and replace free_shipping:1 with local_pickup:2, while keeping the single quotation marks intact.
11. Repeat steps 7 through 10 to find the values of the fields be hidden.
12. If you want to add more fields to be hidden, paste this line in the code snippet below the other similar lines and edit it accordingly: 

unset($fields['billing']['billing_address_1']); 

13. When you’re done, click “Update file”.

With that, you’ve successfully customized your checkout fields based on shipping methods. Feel free to clarify any doubts in the comments below.

Check out the video below:

Further reading

• WooCommerce – How to Remove Checkout Fields? (with video)
• How to Modify WooCommerce Checkout Fields to Improve Revenue.
• Best WooCommerce Checkout Manager Plugins.