Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I want to move the checkout sidebar with in left side of the FORM div in my custom theme.
the sidebar of checkout, where the summary of the products is rendered through KO Template.
I actually want to move both form and sidebar summary in main container of
<div class="row">
is there any way which i can do the accomplish this?
Add below code to
app/design/frontend/Vendor/YourTheme/Magento_Checkout/layout/checkout_index_index.xml
<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="summary" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
<!--<item name="displayArea" xsi:type="string">summary</item>-->
<item name="sortOrder" xsi:type="string">0</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/summary</item>
</item>
<item name="children" xsi:type="array">
<item name="totals" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
<item name="displayArea" xsi:type="string">totals</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/summary/totals</item>
</item>
<item name="children" xsi:type="array">
<!-- sort order for this totals is configured on admin panel-->
<!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
</item>
</item>
<item name="shipping" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Shipping</item>
<item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
</item>
</item>
<item name="grand-total" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Order Total</item>
</item>
</item>
</item>
</item>
<item name="itemsBefore" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<!-- merge your components here -->
</item>
</item>
<item name="cart_items" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
<item name="children" xsi:type="array">
<item name="thumbnail" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
<item name="displayArea" xsi:type="string">before_details</item>
</item>
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
<item name="displayArea" xsi:type="string">after_details</item>
</item>
</item>
</item>
</item>
</item>
<item name="itemsAfter" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<!-- merge your components here -->
</item>
</item>
</item>
</item>
</item>
</item>
<item name="sidebar" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
You have to override checkout_index_index file & if you just compare both files just removed entries which appear on side bar and add them to new desired position under shipping address:
