2

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
3

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;
}
  • Many Many Thanks Works for me. – Arman H Jun 2 '19 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.