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

June 04, 2020

Today, we’re going to teach you how to move the cart total below cart items in your Magento 2 store checkout page.

By default, the order summary block is usually shown above the cart items in Magento 2.

However, most customers usually want to see their cart items first and then the cart total summary.

In this tutorial, we will show you how you can move your cart items above the cart total in Magento 2.

Step-by-Step Process to Move Cart Total Below Cart Items in Magento 2

Let’s look at the process of how to customize the cart total summary block and move it below the cart items block in Magento 2.

Step #1

First of all, we will have to override the checkout_index_index.xml file either in your Magento 2 theme or module according to your requirements.

Here’s a sample path:

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

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

Step #2

The next step is to create a checkout_index_index.xml file in any of the above path and copy the following code.

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By: MageDelight Pvt. Ltd.
 */
-->
<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>