4

How do I move the "Ship to:" and "Shipping Method:" sections from the order summary sidebar into the "Review & Payments" step of the checkout in Magento 2?

I know that as they are UI Components I'm not able to use <move element="" /> as I would with a normal block.

1 Answer 1

4

Both sections are contained in the shipping-information <item>.

Within my theme's checkout_index_index.xml file I was able to disable the component in the summary sidebar, and add it to the billing-step item, which represents the "Review & Payments" step in checkout.

I wanted it to appear at the top of this step above the payment method options so I also added the line <item name="sortOrder" xsi:type="string">0</item>.

My final code to achieve this:

<referenceContainer name="content">
    <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="shipping-information" xsi:type="array">
                                                <item name="sortOrder" xsi:type="string">0</item>
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
                                                </item>
                                                <item name="displayArea" xsi:type="string">shipping-information</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="ship-to" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item>
                                                        <item name="displayArea" xsi:type="string">ship-to</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                            <item name="sidebar" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-information" xsi:type="array">
                                        <item name="config" xsi:type="array">
                                            <item name="componentDisabled" xsi:type="boolean">true</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</referenceContainer>
2
  • Hi, i want same thing but shipping information below payment payment method
    – Mahendra
    Commented Aug 21, 2018 at 9:08
  • Thanks! Worked for M2.4.4 Commented Jun 6, 2022 at 6:01

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.