1

Magento 2 having checkout shipping form fields order as its in below image. I need to change fields order in to Country->State/Province->Zip/Postal Code as mentioned in same image.

enter image description here

Do you have any idea?

6

This can be achieve two way.

First,by changing ui item's sortOrder field value of those field at checkout_index_index.xml.

<item name="country_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">1001</item>
</item> 

create checkout_index_index.xml your theme folder and add below code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="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="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">1001</item>
                                                                </item>
                                                                <item name="region_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">1002</item>
                                                                </item>
                                                                <item name="region" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">1002</item>
                                                                </item>
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">1003</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

You need to changes 1001,1002,1003 value receptive of those fields.

  • Hi Amit, Do you think I need to use MilkJarCookies_OrderDeliveryDate ? – Pankaj Sharma Apr 25 '18 at 8:18
  • I removed this <item name="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping</item> line and working perfect. Thanks – Pankaj Sharma Apr 25 '18 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.