Return to previous page

Making Email field in checkout the prioritized by moving up

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

Nicolo

Participant

July 26, 2024 at 09:10

How can i make the email field in the checkout prioritized by forcing the customer to fill this one out first?

I remember this was possible in the theme customizer? Am i right?

I was recommended by you to change to elementor builders, so hope the feature is available.

#407088 Copied Theme version: 9.3.15

1 Answer

Luca Rossi

Support staff

July 27, 2024 at 13:50

Hi @Nicolo,

Please try adding this custom CSS 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_phone_field {
    order: 2;
}

Hope it helps!

#407257 Copied

Tagged: email checkout enhancement, optimize woocommerce checkout, prioritize email field, woocommerce checkout, wordpress checkout customization, wordpress woocommerce templates
Viewing 2 results - 1 through 2 (of 2 total)