Hello Magento Friends,
In this tutorial, I am going to explain How to Change the Order of Shipping Fields on Checkout Page in Magento 2.
Magento 2 Checkout consists of various input fields. The order of these fields is very important depending on the country. You can change the order of shipping fields on the checkout page in Magento 2.
Check out the steps to Change the Order of Shipping Fields on Checkout Page in Magento 2.
Steps to Change the Order of Shipping Fields on Checkout Page in Magento 2:
Step 1: Navigate to below path
app\code\Vendor\Extension\view\frontend\layout\checkout_index_index.xml
Now, add the code as follows
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<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">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="lastname" xsi:type="array">
<item name="sortOrder" xsi:type="string">18</item>
</item>
<item name="firstname" xsi:type="array">
<item name="sortOrder" xsi:type="string">20</item>
</item>
<item name="country_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">25</item>
</item>
<item name="postcode" xsi:type="array">
<item name="sortOrder" xsi:type="string">80</item>
</item>
<item name="company" xsi:type="array">
<item name="sortOrder" xsi:type="string">100</item>
</item>
<item name="telephone" xsi:type="array">
<item name="sortOrder" xsi:type="string">90</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 2: Run the below commands
php bin/magento cache:clean php bin/magento cache:flush
That’s it!
The shipping fields are reordered at the checkout page of your Magento 2 store.
Conclusion:
This way you can Change the Order of Shipping Fields on Checkout Page in Magento 2. To decrease customer’s tasks you can Auto Fill Checkout Shipping Address Form Fields in Magento 2. Mention your difficulties in the comment box. Share the article further and stay in the know.
Happy Coding!