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


  • Hey, Please check with magento.stackexchange.com/questions/132746/… this url Commented Jul 2, 2019 at 6:05
  • Summary page bind with knockoutJS right?, so above urls answer in enough for my expected result ? Commented Jul 2, 2019 at 6:33
  • yes, Its work for you. 100%, also if you want to add only lable or message than goto html file and put the lable. Commented Jul 2, 2019 at 6:34
  • okay, let me check . Commented Jul 2, 2019 at 6:35

2 Answers 2


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

  • No way :( ,when add this module site takes more time to executes Commented Jul 2, 2019 at 10:42
  • I am also executed that it doesn't take much time. You may try that code in new module
    – Moni Raj
    Commented Jul 2, 2019 at 10:46
  • Nop..! Element not visible Commented Jul 2, 2019 at 11:56
  • Did you try it in new module
    – Moni Raj
    Commented Jul 2, 2019 at 11:56
  • Yes , But No changes Commented Jul 2, 2019 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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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