How to Add WooCommerce Checkout Email Validation

Valid email addresses are the core foundation for any online store for successful marketing. Customers need to confirm their email addresses on the WooCommerce checkout page, to ensure that they have not made any errors. Errors occur when visitors make typos with their email addresses.

Table of Contents

Email validation is a procedure that verifies if an email address is deliverable and valid. This process catches typos, whether they are honest mistakes or purposeful misdirects. It also confirms if a particular email address exists.

WooCommerce Checkout Email Validation

This tutorial will show you how to add an email verification field on the checkout page. This will ensure that visitors double-check their entry. We will use a custom PHP code snippet that I created specifically for this purpose. The code snippet also shows an error message in case they do not match.

Steps to Add a Confirm Email Address Field on the WooCommerce Checkout Page

Here are the steps that you need to follow:

Log into your WordPress site and access the dashboard as the admin user
From the dashboard menu, click on the Appearance Menu > Theme Editor Menu. When the theme editor page is opened, look for the theme functions file with the extension functions.php. Open this functions file to add the function to add a confirm email address field on the WooCommerce checkout page.
Add the following line of code to the functions.php file:

/**

*      Add "Confirm Email Address" Field @ WooCommerce Checkout

*/

// ---------------------------------

// 1) Make original email field half width

// 2) Add new confirm email field

add_filter( 'woocommerce_checkout_fields' , 'njengah_add_email_verification_field_checkout' );

function njengah_add_email_verification_field_checkout( $fields ) {

  $fields['billing']['billing_email']['class'] = array( 'form-row-first' );

  $fields['billing']['billing_em_ver'] = array(

    'label' => 'Confirm mail Address',

    'required' => true,

    'class' => array( 'form-row-last' ),

    'clear' => true,

    'priority' => 999,

);

  return $fields;

}

// ---------------------------------

// 3) Generate error message if field values are different

  add_action('woocommerce_checkout_process', 'njengah_matching_email_addresses');

function njengah_matching_email_addresses() {

    $email1 = $_POST['billing_email'];

    $email2 = $_POST['billing_em_ver'];

    if ( $email2 !== $email1 ) {

        wc_add_notice( 'Your email addresses do not match', 'error' );

    }

}

This is the outcome:
This is the error message:

Conclusion

This post shares how you can add a confirm email address field on the WooCommerce checkout page. I have shared the custom PHP code snippet that you will use. All you need to do is copy and paste it into the theme’s functions.php file. This code snippet will also generate an error if the field values are different. If you want more functionality like confirming a valid email address, please consider using a plugin or hire a qualified WordPress developer.

Editorial Staff

How to Add WooCommerce Checkout Email Validation

WooCommerce Checkout Email Validation

Steps to Add a Confirm Email Address Field on the WooCommerce Checkout Page

Conclusion

Similar Articles

Related