Menu Close

    Show shipping-information on top of sidebar on checkout page

    Sometime, according to the need of design we have to re-arrange the checkout sidebar elements. Let’s see how we can move the shipping-information section above in the cart summary listing on checkout page.

    Checkout page is a bit different than other layouts, the elements are defined as components. So, to move the shipping-information we need to follow two points:

    • First disable the old shipping-information component.
    • Add the new component in the right place to show at proper position.

    You have to create checkout_index_index.xml file either in module or in theme and add the following content:

    The shipping-information will be visible at the top of the sidebar:

    <?xml version="1.0"?>
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
    <page xmlns:xsi="" layout="1column"
            <move element="shipping-information" destination="checkout.cart.container" after="checkout.cart.totals"/>
            <referenceBlock name="checkout.root">
                    <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="sidebar" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="summary" xsi:type="array">
                                                <item name="children" xsi:type="array">                                                 
                                                      <!-- show shipping info at the top of sidebar -->
                                                    <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 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>
                                                  <!-- disable shipping information section from siderbar -->
                                            <item name="shipping-information" xsi:type="array">
                                                <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>

    And here is the result:

    Start your headless eCommerce
    Read More

    Similarly, to make the shipping-information show in between the total price details and the item list section, you just need to set the sortorder to 1, inside the shipping-information item.

    <item name="sortOrder" xsi:type="string">1</item>

    And here is the result.


    You have to add the css for the block as it has been moved from its initial position. Thanks!

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top