Magento2 : Change shipping address layout on checkout page

Question

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

How can achieve task ? any have solve this ?

Answer 1

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.