0

Want two input fields in one Line on checkout page. Looks like it is binded by knockoutjs. Didn't figure out where to add custom classes. Looked into so many files (Magento_Ui and Magento_Checkout) but didn't found anything to change the classes. Please help me out in making the following shipping address template.

enter image description here

  • 1) Magento way magento.stackexchange.com/a/195712/54588 2 ) Easiest way using bootstrap : magento.stackexchange.com/a/195553/54588 – Manoj Deswal Nov 3 '17 at 12:13
  • @Manoj where to add css class in checkout shipping form. Which File? – Vinay Nov 3 '17 at 12:15
  • Any custom css you can add in "_extend.less" for any any page ..the best magento way..state in 1st way.... 2nd you can add bootstrap in your project and use bootstrap classes – Manoj Deswal Nov 3 '17 at 12:17
  • @Manoj but there is no div added in checkout page. I will write the css if there is specific div. How to add div in Checkout Shipping Address Form fields. – Vinay Nov 3 '17 at 12:18
  • start debug mode from admin and find out the file , where you can add div or custom classes – Manoj Deswal Nov 3 '17 at 12:19
0

Enter the css code in custom.css to achieve design mention in question image (checkout shipping fields). It will make all fields to half except Street Address

.checkout-index-index .form-shipping-address #shipping-new-address-form {
            .field {
                &:nth-child(2n+1) {
                    width: 49%;
                    float: left;
                }
                &:nth-child(2n) {
                    width: 49%;
                    float: right;
                }
            }
            fieldset {
                width: 100% !important;
                div.field {
                    width: 100% !important;
                }
            }
        }   

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.