How to Customize WooCommerce Checkout Fields?

Customizing your e-commerce website is a time-consuming task. The store owner always tries to keep the store awesome without compromising the appearance. There may be also some special fields they like to add in their store for knowing them in deep.

For an eCommerce store, the checkout section is an important part as the customers are managing their address and completing the billing details from here. So, it is important to customize the checkout part in the best way.

The

Checkout Field Editor

is a WooCommerce plugin using which you can customize the fields of your checkout page efficiently.

As the plugin is having an easily understandable interface, you can add, delete, modify, or alter the display order of the fields within a short span of time.

Also, the plugin allows you to create and have the custom sections in the checkout forms. Apart from these, the

Checkout Field Editor Plugin

comes with numerous features. Some of the major benefits of the plugin are discussed below.

Different Types of Field Available In The Plugin

different field types

Figure 1

As you can see in figure 1, there are a number of field type options in the plugin. You can choose any of them as per your need. Text, password, Email, number, checkbox, and so on are the field types available.

Even the field type for uploading the files is included in the plugin. Also, the field type for choosing the date and time is available. You can offer the customer to choose any of them according to your preference.

Also, using the wrapper class you can perform custom stylings like customizing the width of the textbox, changing the background color, etc.

With the input class and label class, you can do the stylings with CSS.

Managing Custom Fields As Sections

create new section

Figure 2

The field can be easily managed to sections using the option of

Create New Section

as seen in figure 2. The checkout field editor allows you to create new sections along with providing the option to display the section as per your preference.

display position

Figure 3

With the help of this plugin, it is much easier to organize the custom fields as well. From

figure 3

, you can see that the plugin offers a number of options for setting the display position of the section. These types of easy customizations make the plugin much worthier.

Display Sections And Fields Conditionally

Figure 4

You can customize the display of the section more efficiently using the

Display Rules

section of the plugin (Refer figure 4).

Using the display rule, you can show the field based on the product, variation in the product, product tags, price, and so on.

You can show the fields and to the customer as per the user roles. The plugin is offering a number of facilities for creating conditional roles depending on the field values, checkbox, date picker, and more.

Apart from these features, the Checkout Field Editor plugin provides a conditional display based on the payment and shipping methods.

The Fields of Price Using The Set Of Price Types

Figure 5

The Checkout Field Editor plugin also offers a wide range of price types. In the text field type, you are having the price types like fixed, custom, percentage of cart contents total, percentage of subtotal, percentage of subtotal excluding tax, and dynamic (see figure 5).

These price types will be varying as you choose the field type. As you choose the field type, the number of price types may increase or decrease.

Show Custom Fields In My Account Page

The custom fields can be controlled from the

My Account Page

.

Figure 6

But, you need to enable the

User Meta Data

by ticking the checkbox (See figure 6). So that the field will be displayed in the

My Account Page

. Apart from this User Meta Data, there are many other options that allow you to decide the field should be displayed in particular places or not.

Validators For Checking The Field Input Value

Using these custom validators, the field input values can be validated.

Figure 7

From the

Advanced Settings

of the checkout form, you can set up the validators. Firstly, you need to create a custom validator by setting up the label and name for the validator.

Then, enter a proper validation with all the characters and numerals that you allow. At last, enter the notification message to be displayed for the customers.

Like the custom field validators, enter the name and label for the validation. Also, enter the field name of the field that need to be matched with the entered one. Then, enter the notification message to be displayed.

In case, the customer needs to verify the customer id or password, then you can make use of this validator to confirm that they are using it. No special technical knowledge or coding is needed to do this.

Manage field available in Emails and order details page

Figure 8

By enabling or disabling the

Display in Admin Emails

, you can alter the visibility of the fields in the email. You can add the field in the customer emails by enabling the

Display in the customer Emails

checkbox.

Also, there are options like the

Display in order Detail Page

,

Display in Thank You Page, Order MetaData

(see figure 8).

You can allow or disallow them as per your preferences.

Along with that click on the

Required

checkbox to make it a required field for the customers. So that they cannot order the product without filling this field. After allowing or disallowing the checkbox, click on the

Save

button to make it live.

Repeat A Field Or A Group Of Custom Field

Figure 9

Here, you can set a repeat rule for the cart quantity. In the above figure, you can see that there are 3 products in the cart. So that the set of fields are also displayed thrice. For an e-commerce website, it is very helpful for the customers to enter the details of each product.

Other Key Features Of The Plugin

Apart from these, the checkout manager plugin is having a number of other features like multilingual support, Zapier support. This plugin is also super friendly with the customer hooks. Also, compatible with different popular plugins and includes many other features.

Varun Pramod