How to change the order of steps for one page checkout in Magento 2.3.*?

A

Alexander2021-10-02 14:50:12

PHP

Alexander, 2021-10-02 14:50:12

How to change the order of steps (select shipping method first, then customer data fields after) for single page checkout in Magento 2.3.* ?
Google gives outdated solutions.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

Nikita Kravchenko, 2021-10-26
@nkdev55

In checkout_index_index.xml file (Module, Theme, etc) you need to change sortOrder for shipping-step and billing-step .
Example:

Magento/Checkout/view/frontend/layout/checkout_index_index.xml

checkout_index_index.xml :

<?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="billing-step" xsi:type="array">
                                            <item name="sortOrder" xsi:type="string">1</item>
                                        </item>
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="sortOrder" xsi:type="string">2</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>