The basic WooCommerce checkout page may not be sufficient to gather what you require from the customers as the checkout process is a very crucial step in an eCommerce cycle. So we must have a well-planned and organized checkout with clarity. There are options to customize the page. For that, all you need is to install a plugin from the WordPress repository.
Let us take a ride through the plugin Checkout Field Editor by Themehigh, one of the most popular plugins to manage checkout fields.
The Checkout Field Editor plugin lets WooCommerce owners easily customize the Checkout fields and thus create more enhanced Checkout forms for your online stores. They are carefully designed to meet all the major requirements of a store owner to have more enhanced WooCommerce Checkout pages.
The most basic feature of the Checkout Field Editor is that it helps you to add, edit, delete and change the order of the default and custom checkout fields. Also, you can create custom sections using the WooCommerce Checkout manager.
Other than that you can create various and different types of fields, alter pricing, repeat fields based on preset conditions, etc. Among many other fabulous features, I wish to focus on Custom Field Validator and Confirm Validator and shed light on how it works and its usage.
Creating custom field validators based on Regular expressions
Creating custom field validators based on Regular expressions can be mainly executed in two steps. They are as follows:
Step 1: Create a custom field validator using regular expressions.
First, navigate to the respective section using the given path below.
WooCommerce → Checkout Form → Advanced Settings.
You can see the section Custom validators.
In the tab, enter the details like,
Validator Name: Set a unique name for the validation rule, which is used internally to identify the validator.
Validator Label: Set a display name for the Validator.
Validator Pattern: Add a regular expression that is to be used to match any input. Eg : /^[0-9]{5}$/. Any regular expression must be prefixed with /^ and suffixed with $/.
Validator Message: Add a message to be displayed if the validation fails.
As an example, let us create a custom validator that allows alphabets as input in the custom field created. So the information to be entered will be as follows:
Validator name: alphabets_only
Validator Label: Alphabets
Validator Pattern: /[a-z][A-Z]$/
Validator Message: Input Error. Only Alphabets are allowed!
After entering the above-given details let us now create a custom checkout field to apply the custom validator we have created for this particular field.
Step 2: Apply a custom validator to a custom field.
To create a custom field, navigate to the Checkout Fields tab under the Checkout Form menu.
Click on the +Add Field button.
- Choose the Field Type from the dropdown menu. Since we are creating an alphabets_only field, select the field type Text.
- Type in the name as alphabets_only, and Label name as Alphabets field.
- Select the custom validation we have created (namely, Alphabets) from the dropdown menu Validations.
- Remember, to Save & Close.
Now let us view the Front end where the custom field is created with the custom Validator.
For a better understanding of the whole process, go through the screen recordings given below.
Creating confirm field validators to validate the value of a field based on another field
Step 1: Create confirm field validator from the Advanced Settings
First, you have to create a custom checkout field. And for the time being, let us assume that the field name is “Password”.
Click on the +Add field. Select the Field Type as Password from the Dropdown menu.
Type in Name, and Label for the custom field being created.
Enable the option Required. Click on Save & Close.
Now navigate to the Custom Validators section in the Advanced Settings tab.
Create a Confirm field validator by entering the
Validator name, Validator Label, Field Name, and Validator Message.
For example, here the custom field created is Password.
Hence we need to validate the same field, i.e, with Password validation.
So details to be entered will be as follows:
Validator Name → confirm_password
Validator Label → Confirm Password
Field Name → Password
Validator Message → Password Mismatch
Click on Save Changes.
We have thus created a confirm validator, namely, Confirm Password.
Now we have to create a custom field for entering the Confirm Password.
For the same, navigate to the Checkout Fields section.
Click on +Add Field.
Select the Field type from the dropdown menu as Password.
Provide the name and details as given below. Thus, Name → confirm_password
From the validations tab, select the validation as Confirm password. i.e., Validation → Confirm Password
Enable the checkbox Required.
Click on Save & Close.
That’s it. It’s all done.
Now move onto the Frontend to view the changes made. You can also learn the steps from our documentation page where we have listed them in detail.
Custom Validation Rules: https://help.themehigh.com/hc/en-us/articles/900005396143-Custom-Validation-Rules
Confirm Field Validators: https://help.themehigh.com/hc/en-us/articles/900005402063-Confirm-Field-Validators
Have a look!
Conclusion
The Checkout Field Editor plugin by WooCommerce offers a multitude of features and has been able to address several challenges of the checkout processes.
The custom validator can be used for setting specific rules for entering data in the field. Whereas the confirm validators and custom validators together can be used for setting and confirming passwords; confirming confidential info like account number, contact number, or anything similar.
This feature allows you to validate the custom fields created in your Checkout pages with validations not provided with the WooCommerce plugin by default. Or in short, one can create custom validations and also confirm validators in your checkout pages.
Hope this article has been useful and given you a better understanding of how to create and custom validators and confirm validators on the checkout page with Themehigh’s Checkout page Editor
If you do have any similar queries, do comment below and let us know.
THANK YOU!