The WooCommerce checkout page comes preloaded with many fields for the user to fill before submitting the order.
While in many cases the different fields are necessary, in other cases, they are not and can be removed or disabled.
In this article, you will learn how to use the WooCommerce checkout field editor plugin to customize the fields of your checkout page.
Why Editing the Checkout Fields
The reason to edit the checkout fields is simply to make the user experience and the checkout flow short and easy.
By default, the WooCommerce checkout page is loaded with many fields such as first name, last name, company name, psychical address, and etc.
In many cases, you don’t need the customer to fill all the fields, and leaving them on the page may intimidate the customer from purchasing your products.
If the customers are short on time or don’t want to provide irrelevant information about themselves that doesn’t relate to the purchase, they may leave your website, and as a result, you will lose the sell.
For example, if you’re using the WooCommerce plugin to sell digital products, there is no need for the customers to fill the psychical address fields and therefore it should be removed.
On the other hand, if you would like to receive additional information from your customers such as their website name, you can add fields to the checkout page and require them to fill it prior to submitting the order.
Whether you would like to disable or add additional fields to your checkout page, we can do both actions with the WooCommerce checkout field editor plugin.
Install the WooCommerce Checkout Field Editor Plugin
First, we must install the WooCommerce checkout field editor plugin to be able to add or remove fields.
After downloading the plugin, log in to the backend of your WordPress website, and navigate to Plugins -> Add New -> Upload Plugin, choose the plugin that you just downloaded, and activate it.
After activating, navigate to the WooCommerce -> Checkout Fields screen and there you will be able to control and customize the fields.
All the fields that are presented on that page are currently enabled on your website’ checkout page.
The plugins’ page has three different tabs indicating which part of the checkout page you are editing.
The tabs are Billing Fields, Shipping Fields, and Additional Information.
Under the Billing Fields tab, you are editing all the tabs that are related to the billings fields of the checkout page.
You have the option to change any aspect of the field such as type, label, placeholder, position, and validation rule.
Let’s take the top row, for example, the
The type is text meaning the customer can type any text inside the field. If for example the type was set to be a phone number, the customer would only be able to enter digits and not letters.
The label is the text that appears outside the field and notifying the customer what he needs to fill.
The placeholder option is the text that appears inside the field and will be deleted when the customer is typing his own text.
The position is indicating where the field is located, we can see that the position is set to the left and therefore the first name field is only taking 50% and located to the left of the last name option.
The validation rules are set to required meaning that the customer must fill this field before submitting the order.
How to Remove WooCommerce Checkout Fields
Removing specific or multiple fields from the checkout page is very easy.
Step #1: Check the fields boxes
The first thing that you will need to do is to check the box of the field or the fields that you would like to remove.
Step #2: Disable the checked boxes
After checking all the desired boxes, scroll down and click on the Disable/Remove Checked button.
After clicking on the button, the checked boxes turned light grey meaning they were disabled and won’t be displayed on the checkout page.
Then, just click on the Save Changes button.
Step #3: Refresh the checkout page
After saving the changes, go back to your website checkout page and refresh it.
You’ll notice that all the fields that were disabled in the last step cannot be found on the checkout page anymore.
Note: if you would like to keep a field but not set it to be required, just remove the required tag inside the validation rules box.
How to Add Fields to the Checkout Page
With this plugin, you also have the option to add fields to the checkout page by clicking on the Add Field button.
After clicking on the button, a new empty field will be added to the bottom of the page.
Feel free to drag it up to rearrange the order of the fields.
Then, fill the new field with relevant information such as name, type, label and etc.
If for example, you require the customers to enter their website, you can name and label it as a website and set it to be required.
After defining the new field, save the changes, and revisit the checkout page to make sure the new field was added successfully.
Please note, the website field was added under the fields of the billing section because you added it inside the billings tab.
If you would like to display the website field under the additional information tab, switch to the additional information tab and add the new field over there.
In this tutorial, you learned how to easily add or remove fields from the WooCommerce checkout page.
If you have any questions, please ask us using the comment box down below.