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        Get CustomizeWoo.com FREE
* @author        Rodolfo Melogli
* @testedwith    WooCommerce 7
* @donate $9     https://businessbloomer.com/bloomer-armada/
*/
 
// ---------------------------------
// 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' => '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', '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', 'error' );
    }
}

Where to add this snippet?

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

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.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

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

  1. Works like a charm. However, is there a way to prevent users from copy pasting in this field ?

    I found this html code to implement but not sure where to put in your code

    1. Hello Sven, thanks so much for your comment! Yes, this is definitely possible via JS, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hi there,
    The functionality of the code seems to be limited when it comes to off-site payments. If the payment (off-site) fails, the customer is redirected back to the checkout page, where he has to fill out the email confirmation field again. Does anyone have an idea, how this could be solved?

    1. Hello Johannes! Which payment gateway are you referring to? PayPal, for example, redirects back to the Cart as long as I see, so there’s no problem there

      1. Hi Rodolfo,
        Thanks for your feedback!
        It’s a Swiss payment gateway (Postfinance) which redirects back to the checkout page, if the payment fails (or is cancelled bei the customer).
        But actually I think it’s the same with PayPal: if the user is redirected back to the cart page after the payment has failed (or was cancelled by the user) and he proceeds to the checkout page again, he has to confirm his email address a second time, while the rest of the fields are prefilled. So it works in general, but it’s a little inconvenient for the customer if he has to confirm his email twice. But maybe this behaviour only occurs with our payment gateway?

        1. Thanks for the clarification. Yes, this is due to Postfinance and the way it works, so I’m afraid this is custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  3. It does not work with Paypal where paypal has to come back to the site to confirm order. That extra step always results in a false “emails don’t match error”

    1. Thanks for your comment Shelley. Are you able to do another PayPal test for me please? If yes, please change the second part of the snippet to:

      add_action( 'woocommerce_checkout_process', 'bbloomer_matching_email_addresses_test' );
        
      function bbloomer_matching_email_addresses_test() { 
      
          // LOAD THE WC LOGGER
          $logger = wc_get_logger();
          $logger->info( __FUNCTION__ . ' triggered', array( 'source' => 'bbloomer' ) );
          $logger->info( print_r( $_GET, true ), array( 'source' => 'bbloomer' ) );
          $logger->info( print_r( $_POST, true ), array( 'source' => 'bbloomer' ) );
          // END LOGGING
      
          $email1 = $_POST['billing_email'];
          $email2 = $_POST['billing_em_ver'];
          if ( $email2 !== $email1 ) {
              wc_add_notice( 'Your email addresses do not match', 'error' );
          }
      }
      

      Then, send me via email what you see under /wp-admin/admin.php?page=wc-status&tab=logs in the “bbloomer” log file

      Let me know

  4. Work perfect – thank you!

    Is there a way to highlight the email field with a red border on the error?

    1. There should be, yes, try checking the CSS class of fields with validation error and try adding it to the snippet

  5. Thank you for this – just what I was looking for.
    I changed it slightly so it says confirm Email address, rather than mail – and was really chuffed with myself!

      1. Hi

        FYI – I have found a glitch!

        When you give a developer a user name and password in the dashboard, it asks to validate the password, but with no extra box to put it in!

        This only happens on the dashboard – if a customer makes a new account, or logs in it is fine.

        This is fine as I know about it, and just need to disable your code to provide the login

        Thank you
        Amy

        1. That’s not possible Amy unless there is some sort of conflict with something else, as my code only runs when a WooCommerce checkout form is submitted

  6. Hello,

    This snippet is fine and works well.
    Is there a solution to avoid autocompletion on the Confirm field ?

    Thanks in advance for your help in getting this question solved.
    Regards,
    Michel

    1. Not 100% sure Michel. I know you can add an input parameter but it depends on the browser

  7. Works correct. But is it possible to validate when e-mailadres is with starting capital and confirmation not? Now you get an error but the e-mailadress works fine with capitals or not.

    Regards,
    Kees

    1. Hello Kees, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  8. Hello,

    We have made the following changes in the code to make sure customer does not get error even if they add a space or enter the email address in capital in any of the field.

    add_action('woocommerce_checkout_process', 'bbloomer_matching_email_addresses');
      
    function bbloomer_matching_email_addresses() { 
        $email1 = $_POST['billing_email'];
        $email2 = $_POST['billing_em_ver'];
        if ( strtolower (trim($email2)) !== strtolower(trim($email1) )) {
            wc_add_notice( 'Your email addresses do not match', 'error' );
        }
    }
    
    
  9. It works with Paypal, after adding comment from JD Farrell

    It does work with Stripe credit card payments.

    It doesn’t work for me with Stripe > Google Pay (and probably apple pay, still testing)
    Google Pay doesn’t require you to fill any fields.
    User clicks on pay now in Cart, user confirms payment in Android Pay, user is returned to checkout page with error that email adresses do not match, the payment never goes through.
    There are ofc no email confirm fields to fill out on google pay, I guess their payment gateway posts back an email value, but the form fails.
    Not sure how this can be avoided

  10. Is it possible to add the “woocommerce-invalid” class if the email fields does not match ?

    1. Hi Simon, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  11. Hello Rodolfo and thank you for this function , it work great on last version 2020

    Is there a way to do this on woocommerce registration page as well? Any hint plz?

    thank you

    1. Hi Richard, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  12. Still working and i just installed brand new WordPress with Woo 4.2 and php 7.3.16

    Great code snippet. Thank you very much.

    1. Great!

  13. Thank you! This is still working perfectly in May 2020. Very simple and easy to understand — well done!

    1. Cheers!

  14. Hi, Just what I needed. Still working.

    If the user is logged in they still see the confirm email address. Only a minor thing is this easy to fix?

    Thanks.

    1. Hey Martin! Yes you can use the is_user_logged_in() WordPress check to toggle it

      1. Could you give an example of this, how to implement the is_user_logged_in()? This would make the code complete. Many thanks!

        1. Sure. It’ll be something like:

          function bbloomer_add_email_verification_field_checkout( $fields ) {
             if ( ! is_user_logged_in() ) {
                // code here
             }
             return $fields;
          }
          
  15. Hey! Love the blog, I actually encountered an issue with the way validation was working for this snippet. It was rather confusing since PayPal would still open and let them process their information.

    I followed woo source code to see how validation works. Changing the hook and adding the $error to the existing $error variable made it validate like the rest (various billing validation etc)

    // 3) Generate error message if field values are different
    add_action('woocommerce_after_checkout_validation', 'bbloomer_matching_email_addresses',10, 2);
    function bbloomer_matching_email_addresses($data, $errors) {
    	$email1 = $_POST['billing_email'];
    	$email2 = $_POST['billing_em_ver'];
    	if ($email2 !== $email1) {
    		$errors->add( 'validation', __( 'Your email addresses do not match. (Note: is case sensitive)', 'woocommerce' ) );
    	}					
    }
    

    The above changes now validate before PayPal or any order processing is done. The issue was, the money would get validated from paypal and get placed on-hold from bank which would eventually get returned since never processed by PayPal.

    1. FANTASTIC! Thank you

      1. Thank you,
        it was working well until I encountered Stripe Google Pay / Apple Pay payments

        I found the following workaround:

        // 3) Generate error message if field values are different only if not using stripe / android pay / apple pay
        
        add_action('woocommerce_after_checkout_validation', 'bbloomer_matching_email_addresses',10, 2);
        function bbloomer_matching_email_addresses($data, $errors) {
           $email1 = $_POST['billing_email'];
           $email2 = $_POST['billing_em_ver'];
           
        
           if ($email2 !== $email1) {
        	  if (!($_POST['payment_method'] == 'stripe' and in_array($_POST['payment_request_type'], array('payment_request_api','apple_pay')))) {
              	$errors->add( 'validation', __( 'Your E-Mails do not match.', 'woocommerce' ) );
        	  }
           }               
        }
        

        after that android pay was still complaining that billing_em_ver field is required, and I was not able to unset it in the error handling,
        so I just set [‘billing_em_ver’] required from Step2 to false
        I guess the “email fields are different” is a sufficient error anyway

        1. Cool

  16. Thanks for posting this code!

    One problem I ran into. When a customer checks out using PayPal (customer clicks the paypal button before they input their email) they automatically get redirected to the final checkout page. When this happens, Paypal fills out their name and email account for them so when they click the final purchase button, it says their “emails do not match” but there is no option to confirm their email since Paypal redirected them.

    Not sure if that makes sense, but it basically removes a customers ability to checkout with Paypal if they don’t pre-fill their information which is a big problem.

    1. Hi Stephen, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  17. Great snippet!! Still working:
    WooCommerce: 3.9.0
    WordPress: 5.3.2

    1. Thank you!

  18. Still works to date πŸ™‚

    However, would it be possible for the field to recognize/check validity of the email, before clicking the “payment button”?
    Perhaps some jQuery is needed?

    1. Hey Richard, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      1. Hi Rodolfo

        If your were able to adapt this: https://kimjoyfox.com/using-jquery-to-confirm-email-before-submitting-a-form/ it will be awesome!

        Much easier than all that PHP code, don’t you think?

        Thanks

        1. If only I had the time πŸ™‚

  19. hello, how can I add email verification after registration?

    1. Hi Austin, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  20. Maybe a tiny improvement to not directly access $_POST.

    add_action('woocommerce_checkout_process', 'bbloomer_matching_email_addresses');  
    function bbloomer_matching_email_addresses() {    
        if (filter_input(INPUT_POST, 'billing_email') !== filter_input(INPUT_POST, 'billing_em_ver')) {
            wc_add_notice('Your email addresses do not match', 'error' );
        }
    }
    1. Thank you!

  21. Thanks, still working.

    1. Great!

    2. Hi, I got the field but my problem is that the code gives only an error when the verification field is empty. What can I do for this problem?

      1. Just tested on Woo 3.8, still works perfectly. Sorry

  22. Still working! Thank you!!!!

    1. Awesome

      1. Not working for me now. Using code exactly as provided above.

        1. Hi Rob, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

          To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

          Hope this helps!

          R

    1. You’re welcome πŸ™‚

      1. Hello,

        There is any way alsoto add confirm email field in registration?

        1. Ciao Emiliano, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  23. It is, indeed, still working on WP 4.9 and the latest WC. thanks

    1. Brilliant!

  24. ItΒ΄s work

    1. Nice πŸ™‚

  25. Rodolfo,
    Thank you for updating this script πŸ™‚

    1. You’re welcome πŸ™‚

  26. This would be great on the user registration, even better if you provide a tutorial on it.

    Many users make the mistake on registration too.

    Anyhoo, very nice to have extra option for the checkout process

    1. Thanks Chris, I’ll see what I can do πŸ™‚

      1. I second this!!!!

  27. 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!

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

    2. 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.

  28. 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?

      1. I’m having the same issue. It was working perfectly but is now appearing at the top of the form.
        I’ve tried to move using the reorder fields link, but that doesn’t appear to work.
        Any other suggestions?
        Thanks!

        1. Works for me on Storefront theme and latest Woo. Try disable all plugins but Woo + switch theme temporarily – does it work?

  29. 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

  30. 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

  31. 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”?

  32. 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

  33. 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

  34. 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

  35. 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 πŸ™‚

  36. 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

  37. 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 are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

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