BLACK FRIDAY SALE: Get 50% Off On Any UNLIMITED DOWNLOADS Plan! Use Code "blackfriday" At Checkout

DOWNLOAD ALL NOW!

Search for a plugin or theme

How to Use the WooCommerce Checkout Field Editor Plugin

You are currently viewing How to Use the WooCommerce Checkout Field Editor Plugin

The WooCommerce checkout page comes preloaded with many fields for the user to fill before submitting the order.

Often, the different fields are necessary, but they are not, and you should remove or disable them in other cases.

This article will teach you how to use the WooCommerce checkout field editor plugin to customize the checkout page fields.

Why Editing the Checkout Fields

Editing the checkout fields is to make the user experience and the checkout flows short and easy.

By default, the WooCommerce checkout page contains many fields such as first name, last name, company name, psychical address, etc.

Default WooCommerce checkout page

Often, 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.

Asking the customers to provide irrelevant information about themselves will lead them to leave your site. As a result, you will lose the sale.

You can read more about improving the checkout process by reading the best practices article by Bolt.

For example, there is no need for the shipping fields when selling digital products, and you should remove them.

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 in before submitting the order.

Do both with the WooCommerce checkout field editor plugin, or add or disable fields from checkout.

Edit the WooCommerce Checkout Fields

First, we must install the WooCommerce checkout field editor plugin to add or remove fields.

You can get the checkout field customizer plugin from the official WooCommerce website for the total price ($49) or the 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, 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’s checkout page.

Customize the fields

The plugin’s 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, edit all the tabs 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, you set it to be a phone number, the customer will be able to enter digits only.

The label is the text that appears outside the field and notifying the customer what he needs to fill.

WooCommerce extensions

The placeholder option is the text inside the field and will disappear when the customer is typing his text.

The position indicates where the field is. We can see that the position is set to the left, and therefore the first name field is only taking 50% to the left of the last name option.

When the validation rules are required, the customer must fill the field before submitting the order.

Field name label and required

Remove Fields From the WooCommerce Checkout Page

Removing specific or multiple fields from the checkout page is very easy.

Step #1: Check the fields boxes

The first thing you will need to do is check the box of the field or the fields you would like to remove.

Check the field boxes

Once checked, move on to the next step to disable to 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, click on the Save Changes button.

Remove fields

We can now move on to the last step and test the checkout page.

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 you disabled in the last step disappeared from the checkout page.

New billing details

Note: remove the required tag inside the validation rules box if you want to keep a field but not set it to be required.

Make field unrequired

Add Fields to WooCommerce

With this plugin, you also can add fields to the checkout page by clicking on the Add Field button.

Add a new field

After clicking on the button, you can find the empty field at 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, etc.

To add a website field, add a text type, label it, and make it required.

The new field

After defining the new field, save the changes, and revisit the checkout page to ensure it displays the new field.

New tab was added

Please note, the website field is below 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

To improve the user experience, read our article on how to redirect WooCommerce after checkout article.

Conclusion

In this article, you learned how to use the WooCommerce checkout field editor plugin.

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.

Leave a Reply