In this video tutorial, I’m going to show you how to remove form fields from the Account page in the WooCommerce plugin.
Why Should You Want to Remove Any of the Form Fields in the Account Page?
Both WooCommerce Checkout page and My Account page display a form to gather visitors’ data. Stuff like first and last name, address, phone number, email address, etc.
If you, as the store owner, need all that info from your visitors, that’s fine. If you only need some of the info, then it’s a good idea to keep your website’s form as simple as possible by removing unnecessary form fields.
This achieves a few things:
- The page looks cleaner
- Your visitors don’t feel overwhelmed by all the info they need to provide, which makes it easier for them to purchase on your website
- Less personal information you keep about your visitors the better – we all know the kind of responsibility involved in safeguarding sensitive information.
What You Need to Follow Along
If you’d like to follow along with this tutorial, you’ll need:
- WordPress and WooCommerce installed
- A WooCommerce-enabled theme. In this tutorial I use Storefront, but you’re free to use any theme you like that has WooCommerce support. If you want to use a theme that doesn’t add support for WooCommerce by default and would like to learn more on how to add this feature yourself, be sure to watch How to Add WooCommerce Support to Your Theme
- If you’re using a third-party theme, that is, a theme you haven’t coded yourself, use a child theme
- Some knowledge of WordPress filter hooks useful but not essential.
Removing Form Fields from the WooCommerce Checkout Page
This is what the WooCommerce checkout page looks like in my local installation of WordPress with a Storefront child theme activated:
Let’s say you want to remove the Company Name, Phone, and second Address field from the form. To do so, open functions.php
in your favorite code editor and write the following snippet:
function storefront_child_remove_checkout_fields($fields) {
unset( $fields ['billing'] ['billing_address_2'] );
unset( $fields ['billing'] ['billing_company'] );
unset( $fields ['billing'] ['billing_phone'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'storefront_child_remove_checkout_fields' );
The code above uses the woocommerce_checkout_fields
filter hook, which you can find in the class-wc-checkout.php
file in WooCommerce. You build a custom function (I called mine storefront_child_remove_checkout_fields
) which takes a variable storing the form’s fields as argument, removes the unwanted fields (which are in the form of nested arrays) using the unset()
PHP function, and returns the variable with the modified fields.
It then uses WordPress add_action()
to hook the custom function to the woocommerce_checkout_fields
filter hook.
Save your work and make sure everything looks as expected.
This works great if you only want to get rid of the unwanted form fields just on the Checkout page. But, what if you also want to clean up the WooCommerce form on the My Account page? If so, you’ll find out that the code above doesn’t quite cut it.
Removing Form Fields from the WooCommerce My Account Page
After applying the code above, visit the My Account page and click on the Addresses option to edit your address (or add an address if you didn’t enter one):
Note how all the fields you removed earlier are still there.
To get rid of those, WooCommerce provides another filter hook: woocommerce_default_address_fields
, which you can find in the class-wc-countries.php
file in WooCommerce. Add the code below to your functions.php
file:
function storefront_child_remove_unwanted_form_fields($fields) {
unset( $fields ['company'] );
unset( $fields ['address_2'] );
return $fields;
}
add_filter( 'woocommerce_default_address_fields', 'storefront_child_remove_unwanted_form_fields' );
This code is similar to the previous snippet, you’re only using a different filter hook. Save your work and check the result on the front end. The Company and second Address line fields should be gone.
However, the Phone field is still in the form. To remove it, you’ll need one more filter hook, which is also located in the WooCommerce class-wc-countries.php
file: woocommerce_billing_fields
.
Here’s the code you need:
function storefront_child_remove_phone($fields) {
unset( $fields ['billing_phone'] );
return $fields;
}
add_filter( 'woocommerce_billing_fields', 'storefront_child_remove_phone' );
As you can see, this snippet is very similar to the previous ones, it’s just a matter of targeting the right form fields as array items and filtering them through the appropriate WooCommerce hook.
Save your work and make sure the Phone form field is gone.
Resources
To know more about removing and modifying the checkout form fields in WooCommerce, head over to this super useful WooCommerce documentation page: Customizing checkout fields using actions and filters.
For a list of WooCommerce filter and action hooks, visit The Action and Filter Reference on the WooCommerce website.
Hello. Great article. I made a plugin that do the same. You can disable/rearrange content inside the single product page and shop page. Also, you can remove checkout fields. I uploaded it to wordpress, so here you have the link WooEnhacer – WooCommerce Customizer if someone is interested.
Hi Pedro,
Thank you for your comment and for the great resource, I’m sure your plugin is going to be a hit: lots of people interested in WooCommerce templates customization!
Hey, couldent find any other menas of contacts so thought I’d right here. Do you by any chanse know how to edit the footer credits on the PIXGRAPHY theme by freesia? Been really struggeling with it. It’s not possible through the footer.php and can’t find it in the funcions.php either? Some help from a pro like yourself would be much appreciated! 😀
Hi Oliver,
Thanks for your kind comment. I haven’t worked with this theme, but from a quick look at the code it looks like there’s a number of Customizer options for the footer. Regarding the credits, I’ve found this file footer-details.php inside the inc folder where the credits are stored. You could try to use a child theme and replicate this file. This is just from a quick scan of some files, though, there could be a better way.
Yep, it works like charm! Thanks for the great help.