同じ行のWoocommerceチェックアウトフィールド

Question

Woocommerceチェックアウトページのテキストボックスをカスタマイズしようとしています。特に、私はいくつかのテキストボックスを別々ではなく同じ行に作成したいと思います。私はフロートプロパティでめちゃくちゃCSSだけで試したが、私は私が欠けているものを把握することはできません。これが私がやろうとしていることです..

• 同じ行の市区町村と郵便番号
• 電話とEメールアドレスは同じ行に
• テキストボックスは、名と姓のテキストボックスと同じサイズにする必要があります。

Answer 1

以下のクラスとIDのために、カスタムスタイルエディタを使用してカスタムCSSを追加します。

.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;
}