WooCommerce, one of the most popular e-commerce platforms for WordPress, offers lots of features to create an online store. You can also customize the WooCommerce as per requirements.
The default WooCommerce checkout page includes various fields for billing and shipping information. However, there are scenarios where you might want to streamline the checkout process by removing unnecessary fields.
In this tutorial, we’ll guide you through the steps to remove billing and shipping fields from the WooCommerce checkout page.
Remove Shipping Fields from WooCommerce Checkout
To remove the shipping fields from the WooCommerce checkout page, you have to use the woocommerce_checkout_fields filter hooks. You have to make a function in the functions.php file where you will unset the unnecessary fields.
To make any customization of WooCommerce, I suggest you use a functions.php file of the child theme. If you don’t have a child theme, you can follow the tutorial on how to create a child theme in WordPress?
We will explore how we can unset the specific fields or all the fields from the WooCommerce checkout page. Before proceeding to remove shipping fields you can see the following image of all fields on the WooCommerce checkout page.
Remove Shipping First name and Last name Fields
To remove the shipping First name and Last name fields from the WooCommerce checkout page, you have to only unset() these field keys from the shipping fields array. See the following code example for using woocommerce_checkout_fields the filter hook.
add_filter('woocommerce_checkout_fields', 'ybc_remove_shipping_fields');
function ybc_remove_shipping_fields($fields) {
unset($fields['shipping']['shipping_first_name']);
unset($fields['shipping']['shipping_last_name']);
return $fields;
}Add this code to your active theme’s functions.php file and then save it. You will see the First name and the Last name from the shipping fields have been removed from the checkout page.
You can also apply custom validation on these fields using the woocommerce_after_checkout_validation action hook. For more details check the tutorial on how to apply custom validation on the checkout form?
Remove Shipping Address, City, Postcode, State, and Country Fields
To remove the shipping address field along with the city, postcode, state, and country fields from the WooCommerce checkout page, we will unset() these fields by using their key from all fields array.
add_filter('woocommerce_checkout_fields', 'ybc_remove_shipping_fields');
function ybc_remove_shipping_fields($fields) {
unset($fields['shipping']['shipping_address_1']);
unset($fields['shipping']['shipping_address_2']);
unset($fields['shipping']['shipping_city']);
unset($fields['shipping']['shipping_postcode']);
unset($fields['shipping']['shipping_country']);
unset($fields['shipping']['shipping_state']);
return $fields;
}Add this code to your active theme’s functions.php file and then save it. It will remove the shipping address, city, postcode, state, and country fields from the WooCoomerce checkout page.
Remove Shipping Phone Number Fields
Same as the above code, to remove the shipping phone number from the WooCommerce checkout page, we will only unset() the phone number field key from the main field array.
add_filter('woocommerce_checkout_fields', 'ybc_remove_shipping_fields');
function ybc_remove_shipping_fields($fields) {
unset($fields['shipping']['shipping_phone']);
return $fields;
}Add this above code to your active theme’s functions.php file and then save it. Now you can check your WooCommerce checkout page, the shipping phone field has been removed.
If you want to remove other fields, you can do that same as the above code example by just passing the field key with the shipping fields array in the unset() function. You can also remove all the fields together in one function by passing all the field keys in unset().
Remove Billing Fields from WooCommerce Checkout
To remove the billing fields from the WooCommerce checkout page, we will use the same woocommerce_checkout_fields filter hooks. We just have to mention the billing key and its field name key in the unset () function.
Let’s explore how to remove a specific billing field or all fields from the WooCommerce checkout page. The following image is the reference image of the billing fields on the checkout page.
Remove Billing First name and Last name
To remove the First name and Last name from billing fields, use the woocommerce_checkout_fields filter hook with the firstname and lastname array key in the unset() function.
add_filter('woocommerce_checkout_fields', 'ybc_remove_billing_fields');
function ybc_remove_billing_fields($fields) {
unset($fields['billing']['billing_first_name']);
unset($fields['billing']['billing_last_name']);
return $fields;
}Add the above code to your child theme’s functions.php file and save it. It will remove the First name and Last name from the checkout page.
Remove Billing Address, City, Postcode, State, and Country Fields
To remove the WooCommerce billing fields from the checkout page, we will use the same woocommerce_checkout_fields filter hook.
add_filter('woocommerce_checkout_fields', 'ybc_remove_billing_fields');
function ybc_remove_billing_fields($fields) {
unset($fields['billing']['billing_address_1']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_country']);
unset($fields['billing']['billing_state']);
return $fields;
}Open your functions.php file of the child theme, add this code to it then save it. You will see all the address fields have been removed from the WooCommerce checkout page.
Remove Billing Phone Number Fields
To remove the billing phone number fields from the WooCommerce checkout page, we will also use the same filter hook woocommerce_checkout_fields.
add_filter('woocommerce_checkout_fields', 'ybc_remove_billing_fields');
function ybc_remove_billing_fields($fields) {
unset($fields['billing']['billing_phone']);
return $fields;
}Add this code to the functions.php file and save it. It will remove the billing phone number from the checkout page.
To remove all the checkout billing fields, pass all fields array key in the unset() function and return it.
Related Links:
Conclusion
Customizing the WooCommerce checkout page by removing unnecessary billing and shipping fields is a straightforward process. By following this tutorial, you’ve learned how to access your theme’s functions.php file, write the necessary code, and make the changes effectively.
Remember, always perform such customizations on a staging site or after creating a backup or in-child theme to prevent any unforeseen issues. Feel free to experiment further and explore additional customization options for a seamless and user-friendly checkout experience on your WooCommerce store.
FAQs
Yes, by using the woocommerce_checkout_fields filter hook, you can remove the unnecessary billing and shipping fields from your WooCommerce checkout page.
To remove the specific field from the WooCommerce checkout page, you can use the woocommerce_checkout_fields filter hook and pass that specific field array key to unset() function and return it.
You should use the child theme’s functions.php file for any customization to prevent any future changes or loss while updating themes or plugins.
All the fields on the checkout page are by default like email, shipping, billing, order note, discount code, etc. You can add custom fields or remove these fields by using filter hooks.
