3

I want to change the order of the billing address inputs in checkout, so that the postcode field will be ordered before the city field.

I've tried to set the orders in /view/frontend/layout/checkout_index_index.xml in my extension:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="billingAddress" xsi:type="array">

                                                    <item name="children" xsi:type="array">
                                                        <item name="billing-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="street" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                                </item>
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">2</item>
                                                                </item>
                                                                <item name="city" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">3</item>
                                                                </item>
                                                                <item name="region_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">4</item>
                                                                </item>
                                                                <item name="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">5</item>
                                                                </item>
                                                                <item name="lastname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">6</item>
                                                                </item>
                                                                <item name="firstname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">7</item>
                                                                </item>
                                                                <item name="company" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">8</item>
                                                                </item>
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">9</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Unfortunately, nothing changes in checkout. Even after clearing cache and pub/static.

2
3

You have to make a plugin for the process method of Magento\Checkout\Block\Checkout\LayoutProcessor and then alter the jsLayout array. I got it to work using the code below:

class Reorder
{

    public function afterProcess($subject, $jsLayout)
    {
        foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                 ['payment']['children']['payments-list']['children'] as &$child)
        {
            if (isset($child['children']['form-fields'])) {
                $child['children']['form-fields']['children']['postcode'] = array_merge(
                    $child['children']['form-fields']['children']['postcode'],
                    ['sortOrder' => 75]
                );
            }
        }

        return $jsLayout;
    }
}

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.