In this article, I'll show you (probably) the best way to add the validation for the WooCommerce checkout form (for the e-mail address field) with a free plugin! As a result, you will learn how to validate WooCommerce checkout fields - both default and custom ones with error messages.
Have you ever wanted to implement checkout field validation in WooCommerce yourself to avoid additional programming costs?
In addition, wouldn't be great to customize your WooCommerce checkout fields, the validation, including error messages for free? Let's see how to use a free plugin to do that!
Table of contents
- WooCommerce Checkout Validation Plugin
- WooCommerce Checkout validation (email address example)
- Custom validation rules for developers
- More customization features
WooCommerce Checkout Validation Plugin
First of all, you need a plugin to customize your checkout fields, because WooCommerce lacks this crucial feature! Such a plugin should give you an option to:
- change fields' names,
- change the order of fields,
- create new custom fields or edit existing ones,
- hide the fields, make the required fields optional,
- add the checkout field validation for address, email, or phone fields.
Therefore, we created a plugin that has all the features I have listed above. Furthermore, you can download it for free.
👉🏼Watch this video to have a look at what this plugin offers in the free version:
👉🏼You can download the plugin here:
Also, over 80,000 stores worldwide use the Flexible Checkout Fields plugin daily! Taka look at some reviews:
That sounds like a good piece of code, right? 🤭
Our Flexible Checkout Fields plugin has WooCommerce checkout validation features built-in.
We wanted our plugin to be as easy as possible. So, we decided to make it as much WordPress-style as we can.
You will configure your checkout fields in a second because the design does not get in your way, but helps you achieve your goals smoothly.
WooCommerce Checkout validation (email address example)
1️⃣ First of all, you have to know that WooCommerce has built-in field validation. It can validate email, phone number, or postcode.
Flexible Checkout Fields lets you use these default validation rules on your custom checkout fields.
Furthermore, you can use your own validation. So, you may use Flexible Checkout Fields as an efficient WooCommerce checkout validation plugin!
How to configure WooCommerce checkout fields validation
You can configure validation right in the field settings:
There is a select box so you can simply select an option that you want (or do not use any validation at all).
Turn off checkout field validation
🚫 None - This is a default option for new fields, so no field validation will work in this case.
The field will have default validation turned on as a result of this option. The default validation works with:
- Email field
- Phone field
- Postcode field
Let's see an example of an invalid email address on the checkout page:
🔴 Consequently, you'll see one of the WooCommerce checkout error messages:
📞 Email, Phone, or Postcode
So, you can use this validation also for your WooCommerce custom checkout fields.
Therefore - let's try it! Create a single-line text field and add validation to it. Email validation maybe?
🔴 Next, we enter an invalid email address.
As a result of the WooCommerce checkout validation we receive the error messages:
Of course, you can also use the phone and postcode field validation for your WooCommerce custom checkout fields.
Custom validation rules for developers
You can also add your own custom validation to Flexible Checkout Fields. If you are a developer or familiar with hooks and editing PHP code, it will be very easy.
Checkout field validation & More customization features
Today, you have learned how to configure email address validation with the Flexible Checkout Fields plugin. This is a very powerful tool.
However, Flexible Checkout Fields is not only a WooCommerce checkout validation plugin. You can use it to manage all checkout fields in WooCommerce (including labels, placeholders, or CSS classes), rearrange them or add new custom fields!
I hope this knowledge will help you customize and speed up your WooCommerce checkout!
If you have any questions, just use the comments section below.
PS. Maybe our WooCommerce Checkout Step-by-step Guide will be interesting for you!