The following WooCommerce Snippets will enable you to:
- Add an additional email conifirmation field to the woocommerce checkout
- Check the email entered against the billing email entered
- Display a warning and prevent checkout if the two don’t match
- Hide this field if the user is logged in
Why add a confirm emils filed to the WooCommerce checkout?
I have been running the Green Pasture Farms website for many years, and you would be amazed by the number of people who mistype information into the checkout!
A significant percentage make errors in their email addresses, which means that:
- They don’t receive their confirmation email or shipping details
- Can’t log back into their account to check details
- Don’t receive any important email communications regarding their order
These above factors can lead the customer to believe they haven’t placed an order or have been defrauded.
It can also make it impossible to get in touch with customers about problems – we’ve had more than one customer enter their email, phone number and address incorrectly!
How to add a “Confirm Email” field to WooCommerce checkout without a plugin
Important
Hat tip to Business Bloomer where I first found a snippet to implement the extra email confirmation field.
While the original snippet worked, I also found it had a few issues, so I have revised it and made some small but significant improvements such as:
- The original snippet shows the fields all the time, forcing logged in users to repeat their email twice every time they order, which is unnecessary and inconvenient. The new snippet hides both email fields for logged in uers.
- The original snippet didn’t set the new field type as “Email” and was case sensitive. By default, the billing email was not capitalized, whereas the second field was. This lead to many people failing the validation and not understanding why. I have added ‘type’ => ’email’ to prevent the autocapitalisation, and made the email comparison non case sensitive for good measure.
/**
* @snippet Add "Confirm Email Address" Field @ WooCommerce Checkout
* @author Simon Whyatt
* @testedwith WooCommerce 8
* @community https://woosimon.com/
*/
// Modify email fields at checkout
add_filter( 'woocommerce_checkout_fields' , 'woosimon_customize_checkout_fields' );
function woosimon_customize_checkout_fields( $fields ) {
if ( is_user_logged_in() ) {
// Get the current user's data
$current_user = wp_get_current_user();
// Prefil and hide billing email:
$fields['billing']['billing_email']['type'] = 'hidden';
$fields['billing']['billing_email']['default'] = $current_user->user_email;
$fields['billing']['billing_email']['label'] = '';
} else {
// For non-logged in users, adjust email field and add verification field
$fields['billing']['billing_email']['class'] = array( 'form-row-first' );
$fields['billing']['billing_em_ver'] = array(
'label' => 'Confirm Email Address',
'required' => true,
'class' => array( 'form-row-last' ),
'clear' => true,
'priority' => 100,
'type' => 'email',
);
}
return $fields;
}
// ---------------------------------
// Generate error message if field values are different
add_action('woocommerce_checkout_process', 'woosimon_matching_email_addresses');
function woosimon_matching_email_addresses() {
if ( !is_user_logged_in() ) {
$email1 = strtolower($_POST['billing_email']);
$email2 = strtolower($_POST['billing_em_ver']);
if ( $email2 !== $email1 ) {
wc_add_notice( 'Your email addresses do not match - please double check for errors', 'error' );
}
}
}
And that’s it!
Remember to always check your website thoroughly after adding a snippet, and try making some test orders as both a logged in customer, guest and new customer to make sure everything is working as expected.
The article Add “Confirm Email” field to WooCommerce Checkout – No Plugin first appeared on woosimon.com