How to Validate Email Address in WooCommerce?

Do you want to know how to validate the email address in WooCommerce?

Then you’ve landed at the right place!

In today’s article, I’ll show the step-by-step process to validate email addresses in WooCommerce with the help of the AIO Checkout plugin. It will also help you to add custom checkout fields, create a direct checkout, and much more. 

Here’s a quick sneak peek of the final results. 

How to Validate Email Address in WooCommerce?

I’ll be adding an email field so that the users can re-enter their email address, and if it doesn’t match the one they have already added, they’ll see an error message. 

Follow the following steps to validate the email address in WooCommerce. 

1. Install and Activate the AIO Checkout Plugin

First, you need to download the AIO Checkout plugin. 

Once you have downloaded it, navigate to the Plugins » Add New from your WordPress admin dashboard, and upload the downloaded file to install and activate the plugin.

2. Navigate to the AIO Checkout

Once you have installed and activated the plugin, navigate to AIO Checkout from your WordPress dashboard.

3. Create a New Checkout Form

Click the “Create New Checkout” button to create a new form. 

Once you click the button, a new checkout form will create. It’ll be the default WooCommerce checkout form, but you can completely customize it. 

4. Change the Width of the Email Address Field

First, we need to change the width of the default email address field. To do so, click on the black “Gear Icon” on the field. Once you click it, a window will slide in from the right side of your screen. 

1. Click Appearance Tab

Click the “Appearance” tab to change the width of the field. 

2. Select the Size of the Field

From the “Size” field, select the size of the label. You can choose the size as

• Full Width
• Half Width
• Once-third Width

I have selected the “Half Width” from the dropdown. 

5. Add Email Address Validation Field

We need to add an email field so that users can add their email addresses in the field to validate it. 

To add an “Email” field, click on the black gear icon on your screen's right side. 

Once you click the gear icon, a window will slide in from the right side of your screen. It will have all the fields you can add to your site’s checkout form. 

1. Add Email Field to the Form

Depending on your needs, you can add any type of field you want. For the sake of this tutorial, I’ll be adding the “Email” field.

To add the email field, drag the “Email” field from the right side’s window to the form. You can adjust its position by dragging it up and down. 

2. Open Settings of the Email Field

We need to change the label of it so that it is more understandable to the users. First, we must open the field’s settings to change the label. 

To open the email field’s settings, click on the black Gear Icon on the field. 

Once you click the icon, a popup will appear from where you can control the appearance and other settings of the email field. 

3. Make it a Required Field

To make it a required field, click the “Required Field“ checkbox. 

4. Change the Label of the Email Field

Once you have made it a required field, we need to change the label of the email field that we just added to make it more understandable. 

To do so, enter the label you want in the “Label” field. 

5. Select Email Confirmation

From the “Emil Confirm” field, you’ll get two options:

• Select the Email field to compare
• Email Address

For this tutorial, I have selected the “Email Address.”

6. Change the Width 

To change the width of the email field, click on the black “Gear Icon” on the field. Once you click it, a window will slide in from the right side of your screen. 

1. Click Appearance Tab

Click the “Appearance” tab to change the width of the field. 

2. Select the Size of the Field

From the “Size” field, select the size of the field. You can select the size as

• Full Width
• Half Width
• Once-third Width

I have selected the “Half Width” from the dropdown. 

6. Select the Design of the Checkout Form

Once you have added the radio buttons, click the “Design” tab to select the form's design. You can choose the design as

• Single Column
• Two Columns

I have used the “Single Column” design for this tutorial, but you can choose any of them. 

To select it, select the “Single Column” button. 

7. Enable the Checkout Form

Once you have selected the design of the checkout form, click the “Settings” tab and enable the form by toggling the “Enable” button. 

1. Give a Name to the Form

Now in the “Name” field, give a name to the form. The form's name will be helpful if you have created different forms for different user roles.

You can apply this form to specific user roles from the “Applies to” dropdown. For this tutorial, I am keeping it to “Everyone,” but it depends on your needs.  

8. Save Changes

Now click on the green “Save” button at the top right corner of your screen to save the settings. 

9. Final Results

Once the settings are saved successfully, visit your store's checkout page, fill out the form, and submit it with an empty “Confirm Email” field. You’ll see an error message at the top that the email doesn’t match. 

. 

Conclusion

Now you know how to validate email addresses in WooCommerce with the help of the AIO Checkout plugin. 

I hope this article helped you to validate the email address in WooCommerce. If you have any questions, you can post them below in the comments or contact our customer support. 

The customer support team is quick to answer your questions and help you. They typically reply within 24 hours. 

Download the AIO Checkout plugin to get started!