In some situations default WooCommerce email validation is not good enough. Do your clients often enter the wrong email address on the checkout page? Then add the confirmation checkout field for the user email address verification for the WooCommerce checkout page. In this article, I’ll show you how to do this with the free plugin so that the customers can confirm the email address and your WooCommerce confirmation email reaches them safely!
Have you ever received WooCommerce orders with typos in the customer email address? It can cause additional work and frustrate your buyers, and you don't want that, do you?
Read how to let your customers confirm the email address with an additional WooCommerce custom checkout field and direct verification for the address. It will lower mistakes & prevent you from sending the WooCommerce order confirmation email to the void!
Table of contents
- Let's use the free checkout customizer for WooCommerce
- Let users confirm the email address in the WooCommerce checkout
- User email address verification for WooCommerce
The purchasing process is a very complex and fragile element for every eCommerce. Imagine all your hard work is destroyed by a trivial mistake like misspelled email address on the checkout page.
In the best scenario, you will have to spend some time answering your client.
In the worst one, your client will be annoyed. Even if it’s not your fault you will lose time or money.
Let's use the free checkout customizer for WooCommerce
There is a simple solution for that, and it is possible to achieve this with our free plugin! It’s Flexible Checkout Fields, and people love it. We have received a lot of positive feedback from users and over 80,000 stores worldwide use this plugin!
👉🏽The Flexible Checkout Fields plugin allows you to:
- change fields' names,
- change the order of fields,
- create new, custom fields,
- add validation to fields,
- change fields' look.
👉🏽Watch this video to see how this plugin's settings panel looks like in:
Let the user confirm his email address field in the WooCommerce checkout
Follow the steps below to add a new field for user email address confirmation and further verification for the WooCommerce checkout form!
Get the plugin
Add a new checkout field
If you have the plugin installed and activated, you can go to WooCommerce > Checkout Fields.
👉🏽In the billing section, add a new Text Field. Add a label and click on the Add Field button.
Move the confirmation email field close to the email address
Next, put the new field below your email address field. You can do this with simple drag and drop.
Make the field required
Set this field as Required.
User email address and confirmation email address - Example
With this setup, two email address fields will be displayed one below the other.
More customization options
If you want to display them side by side, you can do this with CSS classes. Just add a special class in the Appearance section.
In the first field, set it as form row first.
In the second one, form row last.
With these CSS classes, both fields will be displayed side by side.
User email address verification for the WooCommerce checkout field
If you have your fields, now it’s time to add custom validation.
Use custom code for email address verification
To confirm the user email address field for WooCommerce, and thus verify the customer input, we will use this code.
Add the code to your functions.php file
👉🏽Please remember to add the code again if you update or change your theme!
The confirmation email address field
👉🏽Next, go back to your checkout fields page, and refresh it.
Now, you should be able to choose the Compare with billing_email option in the validation field. When you do that, save the changes.
Confirm the email address field in the WooCommerce checkout
👉🏽Let’s find out how it will work on the checkout page. Two email address fields aren’t the same.
👉🏽So, when I try to place an order, I get an error message.
Verification error message
You can also change the default error message, by editing this code.
wc_add_notice( sprintf( __( 'Invalid %1$s value.', 'wpdesk' )
To do that, just change
'Invalid %1$s value.'.
Confirm other checkout fields
You can similarly check other fields. Just edit the following code:
$fcf_validation_confirm_field = new WPDesk_FCF_Validation_Confirm_Field( 'billing_email' );
billing_emailfor other fields, like
In this article, I showed you how to add the user confirmation email address field for the WooCommerce checkout page.
👉🏽That feature will help you lower your clients’ errors, and secure your purchasing process.
I hope the article was helpful. Good luck!