WooCommerce Move Email Address Field To The Top Of The Checkout
Pre-Requisites
There are no pre-requisites for this code snippet to work. Keep in mind this solution consists of two code snippets, one to display the content and one to style it.
How To Implement This Solution?
Add these two code snippets as separate entries in either your active child theme’s functions.php file or the Code Snippets plugin.
About The Snippet
Moving the email address field to the top of the checkout page may seem trivial, but it’s actually a smart strategy. Assigning the email address field a priority of 1 in the checkout form can help reduce checkout abandonment. If a user decides to abandon the checkout, they likely have at least completed the first field—an email address is much more valuable than a first name! With some additional code, you can implement a lookup to see if the entered email is already registered and log the user in automatically. This short snippet shows you exactly how to move the email address field to the top of the WooCommerce checkout form, enhancing your checkout process for any reason you see fit.
Code Snippet 1 (Paste This Code In functions.php or Code Snippets )
/**
* Snippet Name: Move the email address checkout field to the top of the form in WooCommerce.
* Snippet Author: Nevercrox Solutions
*/
add_filter( 'woocommerce_billing_fields', 'nevercrox_show_email_first' );
function nevercrox_show_email_first( $address_fields ) {
$address_fields['billing_email']['priority'] = 1;
return $address_fields;
}