Magento – Magento2 : Change shipping address layout on checkout page

magento2onepage-checkoutshipping-address

Need to change shipping address layout on checkout page.

  1. Remove middle name to shipping address form.
  2. Display last name just after first name.

How i can remove middle name to shipping address form.

How to add put firstname and lastname input in new created because of I need to display last name just after firstname.

in short i need to it display in two column (firstname and lastname) like this

enter image description here

How can achieve task ? any have solve this ?

Best Answer

You could overwrite the template layout. This'll give you the most flexibility but may or may not have undesired consequences.

In the shipping-address/form.html knockout template there is this code:

<!-- ko foreach: getRegion('additional-fieldsets') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

You can remove this and overwrite it with snippets as such:

<!-- ko foreach: getRegion('additional-fieldsets') -->
<div class="row">
    <div class="col-sm-6">
        <!-- ko with: getChild('firstname') -->
        <!-- ko template: {name: getTemplate(), data: $data, as: 'element'} --><!-- /ko -->
        <!-- /ko -->
    </div>
    <div class="col-sm-6">
        <!-- ko with: getChild('lastname') -->
        <!-- ko template: {name: getTemplate(), data: $data, as: 'element'} --><!-- /ko -->
        <!-- /ko -->
    </div>
</div>
<!--/ko-->

This will require to you put in logic for each field, it will also make it difficult to have dynamic fields.

Related Topic