WooCommerce Move Email Address Field To The Top Of The Checkout

Pre-Requisites

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.

Need support with the snippet? We’re Here to Help You, Contact Us!

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;
}