You Are Here
PHPStackoverflow

How to Move Email Field to Top in WooCommerce at Checkout page?

PHP

In WooCommerce, the email field is present at the checkout page. Moving this email field to the top of billing details can be fruitful in many ways. This way, it will be the first field to be filled out by the customers. Consequently, the chances are many customers will fill out this field. So, you can collect more email IDs and the benefits of it are many! In this article, you will learn how to move email field to top in WooCommerce at the checkout page. 

Customer email ID details are beneficial in infinite ways. Having email details can save time for login of your customers. Also, having done this, the billing details will get loaded & displayed quickly. Moreover, you can send product review requests, cart reminders, promo offers, etc. Nevertheless, it’s easier to implement this code. So, let’s learn how to do it. 

Image showing how to move email field to top in WooCommerce

PHP Snippet: Move Email Field to Top in WooCommerce 

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

Where do you add this snippet?

So, this is how you move email field to top in WooCommerce. Also, it is easier to activate this function with this code. So, to apply this code, just add this PHP snippet at your child theme function.php file’s bottom. It should be placed before “?>”, if you have it there. Apart from this, CSS goes in your child theme style.css file. Make sure that you are editing these files in a right manner for best results.

Is this snippet still valid?

So, this is how you can learn about move email field to top in WooCommerce at the checkout page. I have applied this code on the Storefront theme and WordPress friendly hosting PHP 7.3. Let me know if everything works as expected when you code. Share it further if you find this snippet useful for you and it had saved your time. 

Also Read, How to Conditionally Force Product Quantity 1 at Cart in WooCommerce?

How to Add Shipping Phone at Checkout Page in WooCommerce?

Important links: WooCommerce – https://woocommerce.com/

Related Posts