Owning a website becoming expensive?

No more! In our library, you will find the best premium WordPress plugins and themes for a fraction of the cost of the original prices. Browse Our Library

How to Edit the WooCommerce Checkout Fields

How to Edit the WooCommerce Checkout Fields

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.

Default WooCommerce checkout page

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.

Shipping fields

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.

You can get the checkout field customizer plugin from the official WooCommerce website for full price ($49), or the EXACT same plugin from us for only $4.99.

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.

Upload a plugin

After activating, navigate to the WooCommerce -> Checkout Fields screen and there you will be able to control and customize the fields.

WooCommerce checkout 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.

Field tabs

Under the Billing Fields tab, you are editing all the tabs that are related to the billings fields of the checkout page.

Billing details fields

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 billing_first_name option.

Field example

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.

WooCommerce extensions

The validation rules are set to required meaning that the customer must fill this field before submitting the order.

Field name label and required

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.

Check the field boxes

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.

Remove fields

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.

New billing details

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.

Make field unrequired

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.

Add a new field

After clicking on the button, a new empty field will be added to the bottom of the page.

Empty field

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.

The new field

After defining the new field, save the changes, and revisit the checkout page to make sure the new field was added successfully.

New tab was added

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.

Add a field in a different tab

Conclusion

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.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

This Post Has 2 Comments

  1. sikis izle

    Wow! Finally, I got a website from where I know how to really take useful information regarding my study and knowledge.

    1. PluginsForWP

      Thank you!

Leave a Reply

LIMITED-TIME PROMOTION

GET ANY WORDPRESS PLUGIN TOTALLY FOR FREE!

Enter your email below to get started