Posted on

WooCommerce: Add “Confirm Email Address” Field @ Checkout

A correct email address is worth a thousand dollars, some ecommerce expert would say ๐Ÿ™‚ So, you don’t want your WooCommerce checkout visitors to mess up with that, do you?

What about adding an “Email Verification” field? In this way, we can make sure they double check their entry – and also show an error message in case they don’t match!

Let’s see how I implemented this for a freelancing client of mine – I’m sure you will be grateful!

Add an email verification field @ WooCommerce checkout

PHP Snippet: Add “Confirm Email Address” Field @ WooCommerce Checkout

 

/**
* @snippet Add "Confirm Email Address" Field @ WooCommerce Checkout
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @sourcecode https://businessbloomer.com/?p=72602
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.5.1
*/

// ---------------------------------
// 1) Make original email field half width
// 2) Add new confirm email field

add_filter( 'woocommerce_checkout_fields' , 'bbloomer_add_email_verification_field_checkout' );
 
function bbloomer_add_email_verification_field_checkout( $fields ) {

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

$fields['billing']['billing_em_ver'] = array(
    'label' => __('Email Address Verification', 'bbloomer'),
    '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', 'bbloomer_matching_email_addresses');

function bbloomer_matching_email_addresses() { 
$email1 = $_POST['billing_email'];
$email2 = $_POST['billing_em_ver'];
if ( $email2 !== $email1 ) {
wc_add_notice( __( 'Your email addresses do not match', 'bbloomer' ), 'error' );
}
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

26 thoughts on “WooCommerce: Add “Confirm Email Address” Field @ Checkout

  1. Hi, thank you for this code which is working great! The only thing is, that I can’t manage to make the field appear next to or at least after the current email field (which is last in order). It appears on the top of the page… Thank you a lot for your help.

    1. Thank you again!
      By changing the code as follows, shouldn’t I be able to adress the “Email Varification field” as well? I can’t manage to get that work… I can adress all other fields except the one I created using your code…

      function bbloomer_move_checkout_email_field( $address_fields ) {
      $address_fields['billing_email']['priority'] = 25;
      $address_fields['billing_em_ver']['priority'] = 26;
      return $address_fields;
      }
       
      add_filter( 'woocommerce_billing_fields', 'bbloomer_move_checkout_email_field', 10, 1 );
      

      Thank you again!

    2. Hey Dana, I think Woo has a bug with reordering fields – see first comment on that other tutorial

    3. I’m having this same issue. This code used to make it show down the bottom next to the email field. But after the recent woo update it now shows up the top. Even using the rearrange as you’ve suggested won’t allow me to move this verification field. It always seems to show in the second place. So it goes First name, email verification then last name. The best I could get was putting email as the first field, but this isn’t ideal.

  2. Hi

    I added this snippet and it works but one major problem.
    The email field is the last field in my checkout and the verification field is the first. In between are address phone etc.

    How can I change the order?

  3. Hello,

    Thank you! Is there any way to trigger woocommerce-invalid class (red) when both fields are not the same, and trigger woocommerce-valid (green) when both fields are the same? Right know it triggers woocommerce-valid in both situations.

    1. Hello Tatiana – thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  4. hey there. the snippet works great however its aligned in the middle. how can i align it left as per the rest of the fields?
    thank you in advance.
    Tom

    1. Hey Tom – thanks so much for your comment! Try playing with the “form-row-last” class in the snippet – try changing that to “form-row-wide” or just “form-row”. Let me know

  5. Hello!
    Thanks for this solution, built into my customer’s webshop and works as described. I have a really dumb question, cause I’m not very good at writing codes:
    I tried to add the phone filed with the same method duplicating this code and replaced the filed names to validate the billing_phone field. The new filed appears okay, but in the end, the function only gets the validation error for the e-mail field. I think I have to nest the two validate actions but I don’t know how to do this.
    So I defined the filters individually, but the actions may be needed to be nested? How can I do that?
    Thank You for Your answer!

    *PS. I just duplicated the actions like this:

    add_action('woocommerce_checkout_process', 'bbloomer_matching_email_addresses');
     
    function bbloomer_matching_email_addresses() { 
    $email1 = $_POST['billing_email'];
    $email2 = $_POST['billing_em_ver'];
    if ( $email2 !== $email1 ) {
    wc_add_notice( __( 'Emails does not match!', 'bbloomer' ), 'error' );
    }
    
    }
    add_action('woocommerce_checkout_process', 'bbloomer_matching_phones');
     
    function bbloomer_matching_phones() { 
    $phone1 = $_POST['billing_phone'];
    $phone2 = $_POST['billing_ph_ver'];
    if ( $phone2 !== $phone1 ) {
    wc_add_notice( __( 'Phones does not match!', 'bbloomer' ), 'error' );
    }
    }
    
    
    1. Hey Arpad, code looks good to me. Did you set the phone number as “required”?

  6. hello, how can I add email verification after registration? something like user receives an email with activation after registration

    1. Hey Lukas, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  7. okay, so how can we go about the custom work and how can you be of help.
    thanks

    1. Hey Chris, thanks so much! If you’d like to get a quote, feel free to contact me here

  8. Thanks for the tutorial,
    But i want to add a confirmation field in woocommerce checkout page and the form will be one on the billing field or any other user profile field but wont show on the checkout page only the confirmation field will show.

    Example:
    TRANSACTION PIN: user_password (but this field will not be seen on the checkout page but it exists in the user profile field and can be edited by user)

    CONFIRM PASSWORD: user_password_confirm
    (this field will be visible on the checkout page and the customer have to type the exact thing is in user _ pass before he can process checkout or submit order

    Note: only the confirm pass field will be seen on the checkout page, while the Transaction pin is a field located in users profile field but will not been seen in the checkout page, and the input in confirm pass form in the checkout page must match exactly the value that the user already have in stored in the user_pass field. if not an error message will appear and order wont be processed.

    1. Hey Chris, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  9. Thanks for this helpful tutorials. I test the code in our staging site and the email address verification appears below in the Postcode/ZIP not below in the Phone. Alignment is good. How to move the email address fields below the Phone like yours on the screenshot?

    Thanks.

    1. I noticed you found the other similar comment ๐Ÿ™‚

  10. Hello,

    Thank you for the useful tutorials.
    I tried the snippet in my local test site and the confirm email address field appears in the center of a new line. Since the email address field is next to the phone number field, those two fields don’t align.
    How can you make those fields align like your screenshot?

    Thank you.

    1. Hey Michico, thanks for your comment! You will need to make the phone and billing email fields full width, you can use the exact same filter provided here. Sorry but I can’t help with custom coding via the blog comments. Thanks!

    2. I have the same issue. Is this issue resolved? How? Can you post a comment, please? Thank you,

      Respectfully,

      Billy

  11. It almost worked, it added the second field, and did not detect the two addresses were different (but I didn’t click further, I thought it would detect right away when I moved on to the next field). It also hid the “subscribe to newsletter” field. I am using Pro Theme, so that probably has something to do with it.

    1. Francie, thanks for your comment! Yes, the error shows when you submit the checkout, it’s only a PHP check and not a jQuery one. For the other issue, no idea, maybe your custom theme is indeed using the same hook and you need to merge the functions to make them work both ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.