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.

Let me know how the snippets in this post work out for your WooCommerce shop!