You can adjust the order of checkout fields relatively easily with a layout update. Open the file checkout_index_index.xml in your theme, or create it if it does not exist. Then insert the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<referenceBlock name="checkout.root"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="checkout" xsi:type="array"> <item name="children" xsi:type="array"> <item name="steps" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shipping-step" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shippingAddress" xsi:type="array"> <item name="children" xsi:type="array"> <!-- The name of the form the field belongs to --> <item name="shipping-address-fieldset" xsi:type="array"> <item name="children" xsi:type="array"> <item name="city" xsi:type="array"> <item name="sortOrder" xsi:type="string">6</item> </item> <item name="region_id" xsi:type="array"> <item name="sortOrder" xsi:type="string">3</item> </item> <item name="region_id" xsi:type="array"> <item name="sortOrder" xsi:type="string">9</item> </item> <item name="postcode" xsi:type="array"> <item name="sortOrder" xsi:type="string">5</item> </item> <item name="country_id" xsi:type="array"> <item name="sortOrder" xsi:type="string">7</item> </item> <item name="lastname" xsi:type="array"> <item name="sortOrder" xsi:type="string">2</item> </item> <item name="firstname" xsi:type="array"> <item name="sortOrder" xsi:type="string">1</item> </item> <item name="company" xsi:type="array"> <item name="sortOrder" xsi:type="string">4</item> </item> <item name="telephone" xsi:type="array"> <item name="sortOrder" xsi:type="string">8</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock> |
As you can see, you can use the element sortOrder to adjust the order. Save the file on the server and clear the Magento cache. The field order in the Magento 2 checkout should now reflect your changes.
Changing the field order of the shipping address in checkout
Need help implementing this solution, or still looking for a fix to your Magento problem? Get in touch and I will be happy to help with your project.