כברירת מחדל, השדות שנמצאים בעמוד הצ'קאוט לא ניתנים להזזה או שינוי, אפ לעשות זאת על ידי התקנת תוסף ייעודי או בקוד.
כמובן שהעדפה תמיד תהיה שימוש בקוד על פני תוסף. בעזרת הקוד הבא נוכל לשנות את מיקומי השדות בעמוד זה.
שדה ה- Order הוא זה שקובע את המיקום
שדה ה- Width קובע את רוחב השדה.
/** arrange Checkout fields */
.woocommerce-billing-fields__field-wrappe{
display: flex;
/*flex-wrap: wrap;*/
}
.woocommerce form .form-row {
display: inline-block;
}
.woocommerce form .form-row input.input-text {
max-width: 100%;
}
#billing_first_name_field {
order: 1;
width: 50%;
}
#billing_last_name_field {
order: 2;
width: 50%;
}
#billing_city_field {
order: 3;
width: 50%;
}
#billing_phone_field {
order: 4;
width: 50%;
}
#billing_email_field {
order: 5;
width: 100%;
}
#account_username_field {
order: 6;
width: 100%;
}
#account_password_field {
order: 7;
width: 100%;
}