1

I want the customers to select a shipping method first, and then enter shipping address. How can I change the order? Thanks.

3
  • What’s your use case? In most systems, the shipping address (zip code at least) will be required to determine the cost of a shipping method - unless you’re using a flat rate across the board, which it sounds you’re not...
    – dbcn
    Commented Mar 9, 2016 at 14:05
  • 1
    I'm going to write a in-store pickup module, so I want to hide the address form if customers selected picking up at store
    – Ricky.C
    Commented Mar 9, 2016 at 14:37
  • Take a look at modifying the opcheckout.js file to skip the shipping address entry if the shipping method is 'pick up.' You can also change the order of the checkout steps. This is one of the trickiest pieces of the codebase, there is a lot of back and forth between the server and the front end, and you may need to heavily modify the js and the php to achieve what you're looking for. Magento probably requires a shipping address, so you'll probably need to add a default shipping address programmatically in the call when the shipping method is set.
    – dbcn
    Commented Mar 9, 2016 at 15:58

1 Answer 1

1

Override the checkout layout (locate in : vendor/magento/module-checkout/view/frontend/layout) and define the sortOrder of each child element according your need.
See below an example with the default checkout sort order.

VendorName/ModuleName/view/frontend/layout/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="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="customer-email" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">1</item>
                                                        </item>
                                                        <item name="before-form" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">2</item>
                                                        </item>
                                                        <item name="before-fields" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">3</item>
                                                        </item>
                                                        <item name="address-list" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">4</item>
                                                        </item>
                                                        <item name="address-list-additional-addresses" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">5</item>
                                                        </item>
                                                        <item name="before-shipping-method-form" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">6</item>
                                                        </item>
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">7</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Then execute following commands :

magento cache:clean
magento setup:upgrade
chmod -R 777 var/*

You also may need to manually remove the contents of the pub/static folder (preserve the .htaccess file):

rm -rf pub/static/*

And deploy new static content :

magento setup:static-content:deploy

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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