Magento 2 – Change Order of Shipping Fields on Checkout Page

checkoutmagento-2.0magento2shippingshipping-address

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">
        <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="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>
                                                            <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="vat_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">1</item>
                                                            </item>
                                                            <item name="country_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">85</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>

Best Answer

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/*