Magento 2: How to Move Cart Total Below Cart Items in Checkout Page

Hello Magento Friends,

In this blog, I will explain How to Move the Cart Total Below Cart Items on Magento 2 Checkout Page.

In the default checkout page of Magento 2, the cart items are displayed below the cart total. Look at the below image:

If you want to display the cart items above the cart total in the checkout page, you can accomplish it using the below method.

Contents

1 Steps to Move Cart Total Below Cart Items in Checkout Page in Magento 2:
2 Conclusion:

Steps to Move Cart Total Below Cart Items in Checkout Page in Magento 2:

Step 1: You need to override the checkout_index_index.xml file in your module or theme as per your requirement. The path to creating a file for the module and theme is as follows

In Module:

app\code\Vendor\Extension\view\frontend\layout\checkout_index_index.xml

In Theme:

app\design\frontend\Themes\Yourtheme\Magento_Checkout\layout\checkout_index_index.xml

Then add the code as follows:

<?xml version="1.0" encoding="UTF-8"?>

<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>

Output:

Conclusion:

This way you can customize the checkout page in Magento 2 by Moving Cart Total Below Cart Items in Checkout Page. Also, you can show custom notice message of cart items on the checkout page in Magento 2. If you have any doubts, let me know through the comment section.

Happy Coding!

Click to rate this post!

[Total: 0 Average: 0]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏