Magento 2 Simplest Guide On How To Change Checkout Fields Order

233

In this article, we will show you 2 best methods for Magento 2 Change Checkout Fields Order.

As you know, checkout is one of the most important steps in the customer journey. It’s where the customer decides to finish their purchase or not.

So everything about your checkout page should be perfect. What fields to display and display them in which order – all need to be considered carefully.

So today, we will guide you to change the checkout fields order in your Magento checkout page to fit our needs.

This tutorial is about How To Change Checkout Fields Order on Shipping and Billing step.

Magento 2 Change Fields Order in Shipping Step

Changing the checkout fields order of the Magento shipping step is a simple task. You just need to know the sort order value of relevant fields and a few xml Magento 2 specific commands.

First of all, you need to have your own checkout_index_index layout override. If you don’t have it, please create a new checkout_index_index xml file so that we can manipulate the Magento checkout layout in the proper way. 

The file needs to be located on the following path:

/app/design/frontend/Vendor/themeName/Magento_Checkout/layout/checkout_index_index.xml

The new layout file needs to have a clearly structured tree in order to target the correct elements Checkout UI components like this:

<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">
                                            <!-- The name of the form the field belongs to -->
                                            <item name="shipping-address-fieldset" xsi:type="array">
                                                <item name="children" xsi:type="array">
 
                    <!— Start: Important part —>

                                                     <item name="postcode" xsi:type="array">
                                                        <item name="sortOrder" xsi:type="string">71</item>
                                                    </item>

                                                     <item name="country_id" xsi:type="array">
                                                        <item name="sortOrder" xsi:type="string">81</item>
                                                    </item>
                    <!— End: Important part: —>

                                                 </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </argument>
</arguments>
</referenceBlock>

As you can see, there are a lot of nesting and children elements. 

However, under the shippingAddress item, you just need to target children elements that represent the input fields you want to change order.

For example, if you want to change the order of the Postcode field (postcode) and Country filed (country_id).

In order to change the position of these elements, you need to update sortOrdering value with a value that will fit your idea for better sort ordering.

By default, the sortOrder value of postcode is 110, and the sortOrder value of country_id is 115. You can update them to 71 and 81.

Finally, clear your cache and then reload the checkout page, and you will see the changes.

EXPLORE NOW: Bad Magento 2 Custom Checkout Fields Design Cases & Actions!

Magento 2 Change Fields Order in Billing Step

Changing the checkout fields order of the Magento billing step requires a different approach than the shipping step. It’s because the billing step is built on the dynamic UI components.

The most important thing to know is that in the billing step, each payment method uses a different billing address form (meaning different components for each payment method). So you need to apply layout changes for all payment methods you are using on the checkout page.

But in this article, we will just show you how to change the order of the Check/Money payment method as an example.

To do it, you need to extend the default Magento Layout Processor Interface. 

This requires a bit of PHP backend adjustments, but it is not too complicated. Please extend LayoutProcessorInterface by creating a new PHP class file under Checkout, Block directory:

/app/code/Vendor/Checkout/Block/LayoutProcessor.php

And then, you use a simple function check:

namespace Vendor\Checkout\Block;

use Magento\Checkout\Block\Checkout\LayoutProcessorInterface;

class LayoutProcessor implements LayoutProcessorInterface
{
    public function process($jsLayout)
    {
        return $jsLayout;
    }
}

You also need to create di.xml for the config so that Magento understands Layout processor changes. XML file will contain this code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Onepage">
        <arguments>
            <argument name="layoutProcessors" xsi:type="array">
                <item name="checkoutFieldsReorder" xsi:type="object">Vendor\Checkout\Block\LayoutProcessor</item>
            </argument>
        </arguments>
    </type>
</config>

You need to ensure that you are targeting the correct UI components. In order to do that, do the inspection of the JSON object which Magento knockout gives us on the frontend. 

You can do it via the IDE or some JSON online editor. Find sortOrder values in Checkout JSON for the elements that you want to reposition. Following the JSON tree, you will declare the same path to the $jsLayout array. 

So basically, you need to do this:

namespace Vendor\Checkout\Block;

use Magento\Checkout\Block\Checkout\LayoutProcessorInterface;

class LayoutProcessor implements LayoutProcessorInterface
{
    /**
     * Reposition postcode to be above city input, and country drop down to be above region
     * 
     * @param array $jsLayout
     * @return array
     */
    public function process($jsLayout)
    {
        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['postcode']['sortOrder'] = 71;

        $jsLayout['components']['checkout']['children']['steps']['children']
        ['billing-step']['children']['payment']['children']
        ['payments-list']['children']['checkmo-form']['children']
        ['form-fields']['children']['country_id']['sortOrder'] = 81;
 
        return $jsLayout;
    }
}

Finally, clear your cache and then reload the checkout page, and you will see the changes.

You also read on How to Remove Billing and Shipping Address from Magento 2 Checkout

The Best Solution For Magento 2 Custom Checkout Fields

The tutorial above shows you a very good method to change the checkout fields order of the Magento shipping and billing step.

However, it’s definitely not the best way. Especially if you are not familiar with code, we know it is very confusing.

So hereby, we want to introduce you to the best solution to customize and optimize your Magento checkout page:

Magento 2 Checkout Custom Field by BSS

First of all, this module allows the admin to add as many fields as they want to the Magento checkout page to find customer insights and even build a quick survey.

It supports various input types, including text field, text area, date and time, yes/no, checkbox, radio button and dropdown.

Magento 2 Checkout Custom Field by BSS also enables the admin to set up which customer group can see custom checkout fields.

And with this extension, you can manage your checkout custom fields at ease.

Check out its full list of features:

• Add any number of Magento 2 custom fields to checkout
• Use those fields as Magento 2 order attributes to improve management
• Show custom fields  in Order grid & on Order Detail page
• Add Magento 2 order custom attributes to transaction emails and documents
• Get values of the created attributes via API

Conclusion

In this article, we have shown you 2 best methods for Magento 2 Change Checkout Fields Order.

We hope this blog is helpful and good luck to you!

Explore Magento 2 One Step Checkout – Simplify the checkout process by gathering 3 checkout steps at one page 

BSS Commerce is one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bringing high-quality products and services to optimize your business effectively. Furthermore, we offer FREE Installation – FREE 1-year Support and FREE Lifetime Update for every Magento extension.

CONTACT NOW to let us know your problems. We are willing to support you every time.