How to Add WooCommerce Checkout Email Validation

WooCommerce Checkout Email ValidationValid 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.

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:

  1. Log into your WordPress site and access the dashboard as the admin user
  2. 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.
  3. 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' );

    }

}
  1. This is the outcome:Add email validation field
  2. This is the error message: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.

Similar Articles

 

 


Customer Reviews

NJENGAH

Customer Reviews

Jeffrey Todd 04/07/2020

Exceptional Plugin & Service

I'm in the process of building my new website, and I had a question about changing some text within the WooCommerce plugin. I was spinning my wheels trying to figure it out. Joe reached back and worked with me - going above and beyond! - until I fully understood how to effectively change what I wanted. How can you ask for more than that? I highly recommend WooCommerce (and Joe!), the plugin and service are exceptional!
-Jeffrey Todd (MyLifeChart.com)