Magento 2 : Move cart total below cart items in checkout page

In this article, we will learn about how to move cart total below cart items in checkout page in Magento 2. In Magento, By default in order summary cart total block display first and then, cart items display in the checkout step.

But, sometimes the customer wants to display the cart total block after cart items. Customization of checkout is one of the most difficult parts of Magento. So, it will a little bit difficult to customize checkout in Magento.

So, Let’s make a little bit easy to customize the order summary block and move cart total below cart items by this blog.

You may also like this :

For that, you need to override checkout_index_index.xml file in your module or theme as per your requirement. Here, I added path to create file :

In Module: app/code/vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml

In Theme: app/design/frontend/[Theme_Vendor]/[Theme]/Magento_Checkout/layout/checkout_index_index.xml

Create checkout_index_index.xml file on below path and paste the below code :

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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="sidebar" xsi:type="array">
                           <item name="children" xsi:type="array">
                              <item name="summary" xsi:type="array">
                                 <item name="children" xsi:type="array">
                                    <item name="totals" xsi:type="array">
                                       <item name="sortOrder" xsi:type="string">99</item>
                                    </item>
                                    <item name="cart_items" xsi:type="array">
                                       <item name="sortOrder" xsi:type="string">0</item>
                                    </item>
                                 </item>
                              </item>
                           </item>
                        </item>
                     </item>
                  </item>
               </item>
            </argument>
         </arguments>
      </referenceBlock>
   </body>
</page>

After that, Clean the cache and you get your output successfully.

In Last, Please don’t forget to add your valuable vote of the blog by star voting !!!

I hope this blog will helpful for easily understand how to move cart total below cart items in checkout page in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution

Keep liking and sharing

Post Views: 5,871