WooCommerce Move Email Address Field To The Top Of The Checkout

Email address field at the top of the WooCommerce checkout form


There are no pre-requisites for this code snippet to work.

How To Implement This Solution?

Add this code snippet to your active child theme’s functions.php file or preferably the Code Snippets plugin.

About this Solution

Moving the email address field to the top of the checkout seems trivial but actually a smart move. Giving the email address field a priority of 1 in the checkout form ties in very nicely with checkout abandonment. If the user does decide to abandon the checkout, it’s likely they may have at least completed the first field – an email address is a lot more useful than a first name! With some additional code, when the user has entered their email, you could implement a lookup to see if the email entered is already registered and log them in. This short snippet shows you exactly how you can move the email address field to the top of the checkout form in WooCommerce for whatever reason you feel necessary.

* Snippet Name:     Move the email address checkout field to the top of the form in WooCommerce.
* Snippet Author:   ecommercehints.com

add_filter( 'woocommerce_billing_fields', 'ecommercehints_show_email_first' );
function ecommercehints_show_email_first( $address_fields ) {
    $address_fields['billing_email']['priority'] = 1;
    return $address_fields;


Snippet Benefits

  • Capture an email address earlier on in the checkout process – an email address is more useful than a first name should the user abandon the checkout.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

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

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers