I'm trying to customize Woocommerce checkout page text boxes. Specifically I want to make some text boxes on the same line instead of separate. I've tried only with css messing around with float property but I can't figure out what I'm missing. This is what I'm trying to do..

• City and Zip Code on the same line
• Telephone and Email Address on the same line
• Text boxes should be the same size as First Name and Last Name text boxes

I'm trying to customize Woocommerce checkout page text boxes. Specifically I want to make some text boxes on the same line instead of separate. I've tried only with css messing around with float property but I can't figure out what I'm missing. This is what I'm trying to do..

• City and Zip Code on the same line
• Telephone and Email Address on the same line
• Text boxes should be the same size as First Name and Last Name text boxes

• woocommerce-offtopic
• css

1 Answer 1

Add custom CSS using custom style editor, for below classes and IDs

.woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.woocommerce form .form-row {
  display: inline-block;
}
.woocommerce form .form-row input.input-text {
  max-width: 252px;
}
#billing_first_name_field {
  order: 1;
}
#billing_last_name_field {
 order: 2;
}
#billing_company_field {
  order: 3;
}
#billing_country_field {
  order: 4;
}
#billing_address_1_field {
  order: 5;
}
#billing_address_2_field {
  order: 6;
  width: 100%;
}
#billing_city_field {
  order: 7;
}
#billing_postcode_field {
  order: 8;
}
#billing_state_field {
  order: 9;
  width:100%;
}
#billing_phone_field {
  order: 10;
}
#billing_email_field {
  order: 11;
}