Les champs de caisse de Woocommerce sur la même ligne

Question

J'essaie de personnaliser les zones de texte de la page de paiement de Woocommerce. Plus précisément, je souhaite créer des zones de texte sur la même ligne au lieu de les séparer. J'ai essayé uniquement avec css déconner avec la propriété float mais je n'arrive pas à comprendre ce qui me manque. C'est ce que j'essaie de faire ..

• Ville et code postal sur la même ligne
• Téléphone et adresse e-mail sur la même ligne
• Les zones de texte doivent avoir la même taille que les zones de texte Prénom et Nom

Answer 1

Ajouter un CSS personnalisé à l'aide de l'éditeur de style personnalisé, pour les classes et ID ci-dessous

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