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:

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.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.