Checkout is an essential part of e-commerce. The revenue is generated from the checkout itself. Hence, it is necessary to organise the checkout reasonably.
Fields on shipping forms can vary from business to business and geo-locations. Hence, we often need to reorganise the fields of the shipping forms.
We will see how to apply a sort order to the shipping address form at checkout.
Magento 2: Apply Sort Order on Shipping Address at Checkout
We can sort almost all fields using checkout_index_index.xml. However, there are certain limitations to it. Yes, a layout file cannot sort fields like street addresses. Checkout the post to sort street address on the shipping form: https://sbdevblog.com/magento-2-apply-sorting-to-street-address-on-shipping-form/.
We will sort those fields that can be sorted using the layout file. So, let’s create a file named checkout_index_index.xml inside the layout directory, either in our custom module or theme.
<?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="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="firstname" xsi:type="array">
<item name="sortOrder" xsi:type="string">1</item>
</item>
<item name="lastname" xsi:type="array">
<item name="sortOrder" xsi:type="string">2</item>
</item>
<item name="city" xsi:type="array">
<item name="sortOrder" xsi:type="string">75</item>
</item>
<item name="postcode" xsi:type="array">
<item name="sortOrder" xsi:type="string">80</item>
</item>
<item name="region_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">90</item>
</item>
<item name="country_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">70</item>
</item>
<item name="telephone" xsi:type="array">
<item name="sortOrder" xsi:type="string">65</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>ˀAs we can see, we have used fields under the shipping step. We have sorted the telephone and country in the above file. We have moved the phone and country above the region and street.
That’s it. It is easy to sort fields of shipping addresses. We will sort fields for billing addresses and future posts. Stay tuned with a subscription to SbDevBlog.
Thanks for reading the post: Magento 2: Apply Sort Order on Shipping Address at Checkout.
Note: Please verify the code of this blog and the relevant git repository before using it in production.
🙂 HAPPY CODING 🙂
One thought on “Magento 2: Apply Sort Order on Shipping Address at Checkout”