Return to previous page

Move email field to top of billing address on checkout page

This topic has 4 replies, 2 voices, and was last updated 1 months ago ago by Luca Rossi

plnewton

Participant

October 23, 2024 at 10:29

Hi

I would like to move he email address on the checkout page so it is under the first and last name but before the company field

Currently it is right at the bottom of the address

How can I achieve this?

Thanks

Please, contact administrator
for this information.

#420123 Copied Theme version: 9.4.3

3 Answers
Luca Rossi

Support staff

October 23, 2024 at 15:28
Hi @plnewton,

Please try adding this custom CSS code under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
    flex: 0 1 100%;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first, 
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last{
    flex: 0 1 50%;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p#billing_email_field {
    order: -1;
    margin-bottom: var(--fields-v-gap, 1.43rem);
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p#billing_first_name_field,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p#billing_last_name_field{
    order: -2;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p#billing_phone_field {
    order: 2;
}
```
https://prnt.sc/T_idXOYEwwgU

Hope it helps!
#420182 Copied
plnewton

Participant

October 23, 2024 at 22:08

Thank you, that has worked fine

#420213 Copied

Luca Rossi

Support staff

October 24, 2024 at 06:56

Hi @plnewton,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#420243 Copied
Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘Move email field to top of billing address on checkout page’' has been successfully resolved, and the topic is now closed for further responses

Move email field to top of billing address on checkout page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection