How to Move Email Field to the Top WooCommerce

WooCommerce Move Email Field to the TopAre you looking for a way to move the email field to the top of the checkout page in your WooCommerce store? In today’s post, we will show you how you can do that using a custom code snippet we created.

WooCommerce, just like WordPress, has a lot of great actions and filters. However, for you to implement this solution, you need to learn more about WooCommerce checkout hooks.

It is important to note that the checkout page is one of the most important steps in the purchase process. Therefore, you should optimize this page to increase conversion rates.

The checkout page is where the customer pays for the items in the cart. Considering how many shoppers abandon their carts and how much competition there is nowadays, you should optimize the checkout to close as many sales as possible.

WooCommerce includes a good default configuration, but you may need to edit this page to provide your customers with the best checkout experience.

One of the changes you can apply to edit your WooCommerce checkout page is by moving the email field to the top. This is because it is one of the most important piece of information that should be captured when making a purchase.

However, WooCommerce does not have a built-in solution to fix this. This is why we created this post to help you.

WooCommerce Move Email Field to the Top

By the end of this post, you will be able to move the email field to the top of the checkout page. Since we will be using a custom code snippet to edit WooCommerce’s core files, we recommend that you install or create a child theme. This will ensure that your changes are not lost when you update your theme.

With that in mind, let us get right into it.

Steps to Move the Email Field to the Top

Here are the simple steps you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to move the email field to the top.
  3. Add the following code to the functions.php file:
add_filter( 'woocommerce_checkout_fields', 'njengah_email_first' );

function njengah_email_first( $checkout_fields ) {

            $checkout_fields['billing']['billing_email']['priority'] = 4;

            return $checkout_fields;

  1. This is the outcome:move field to another field group

Wrapping Up

In today’s post, you have seen how you can easily move the email field to the top of the checkout page. We have tried to explain each step in detail so that you do not have a hard time implementing the solution.

If you are not familiar with handling code, you should consider using a plugin. Alternatively, you can hire a qualified WordPress developer.

We hope that this post helped you find a solution to your problem.

Similar Articles

  1. How to Send Email on Status Change In WooCommerce

Customer Reviews


Customer Reviews

Jeffrey Todd 04/07/2020

Exceptional Plugin & Service

I'm in the process of building my new website, and I had a question about changing some text within the WooCommerce plugin. I was spinning my wheels trying to figure it out. Joe reached back and worked with me - going above and beyond! - until I fully understood how to effectively change what I wanted. How can you ask for more than that? I highly recommend WooCommerce (and Joe!), the plugin and service are exceptional!
-Jeffrey Todd (