How to Change the Order of Shipping Fields on Checkout Page in Magento 2

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.

Contents

1 Steps to Change the Order of Shipping Fields on Checkout Page in Magento 2:
2 Conclusion:

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!

Click to rate this post!

[Total: 5 Average: 4.8]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏