I need to add a div inside the summary section. please guide me how to achieve the expected result. Also please check with below image to view summary section.

enter image description here



You can override the checkout_cart_index page:

1.Inside [vendor-name] / [module-name] / view / frontend / layout / checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.cart.totals">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="block-totals" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="CustomData" xsi:type="array">
                                    <item name="component"  xsi:type="string">[vendor-name_module-name]/js/checkout/cart/totals/customdata</item>
                                    <item name="sortOrder" xsi:type="string">20</item>
                                    <item name="config" xsi:type="array">
                                         <item name="template" xsi:type="string">[vendor-name_module-name]/checkout/cart/totals/customdata</item>
                                        <item name="title" xsi:type="string" translate="true">Custom Data</item>

2.Create a js file under [vendor-name_module-name] / view / frontend / web / js / checkout / cart / totals / customdata.js with


        function (Component){
                 'use strict'; 
                  return Component.extend({});

3.Create a html file under [vendor-name_module-name] / view / frontend / web / template / checkout / cart / totals / customdata.html

<tr class="totals">
  <th class="mark" scope="row">
    <div>This is a div element</div>

The Result will be


Hope this will be help you

| improve this answer | |
  • No way :( ,when add this module site takes more time to executes – Shafeel Sha Jul 2 '19 at 10:42
  • I am also executed that it doesn't take much time. You may try that code in new module – Moni Raj Jul 2 '19 at 10:46
  • Nop..! Element not visible – Shafeel Sha Jul 2 '19 at 11:56
  • Did you try it in new module – Moni Raj Jul 2 '19 at 11:56
  • Yes , But No changes – Shafeel Sha Jul 2 '19 at 11:57

Please try with below url -

Add custom product attribute to checkout summary Magento 2

If you want to add label or message than override below html file checkout\view\frontend\web\template\summary\item\details.html

I hope its work for you.

| improve this answer | |
  • can you please check with your theme files, i tried from my side, its working for me. – Anas Mansuri Jul 2 '19 at 7:09
  • No way brother , this not work for me !!!!!!!! – Shafeel Sha Jul 2 '19 at 8:22
  • Try with this directory - vendor/magento/module-checkout/view/frontend/web/template/summary/ – Anas Mansuri Jul 2 '19 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.