Magento 2 – Change the order of the Shipping fields on the Checkout page

The question:

I would like to change the order of the Shipping fields on the Checkout page so that they display in the following order:

  • Your Email
  • Street
  • City
  • State
  • Zip Code
  • First Name
  • Last Name
  • Phone Number

From the research I have done, the way to approach this seems to edit the checkout_index_index.xml file. However, when I flush the static cache and run php bin/magento setup:static-content:deploy I do not see changes to my Shipping Address fields.

The following are the contents of my checkout_index_index.xml

    <referenceBlock name="checkout.root">
            <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="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="region_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">87</item>
                                                            <item name="postcode" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">80</item>
                                                            <item name="company" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">100</item>
                                                            <item name="vat_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">1</item>
                                                            <item name="country_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">85</item>
                                                            <item name="telephone" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">90</item>

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

From past experience making changes to knockout templates, you may need to manually remove the contents of the pub/static folder (preserve the .htaccess file):

rm -rf pub/static/*

Method 2

**After Change layout you need to remove configuration cache **

Run the below command to remove configuration cache

php bin/magento cache:clean config
php bin/magento cache:flush config

After that reload it will work.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment