How to Add Custom Content in Order Summary on Checkout Page in Magento 2

Checkout in Magento 2 store is a page where merchants can focus their efforts on customer retention.

The Pareto Principle shows 80% of your profits come from just 20% of customers – Forbes

Customer retention is cheaper than acquisition. Hence, Magento 2 store owners can customize their checkout page in order to increase customer retention.

Or, they can customize the checkout page to increase the average order value, encourage to upgrade the customer group or any other message related to the order fulfilment process.

For instance, Magento 2 store owner may want to add the custom messages like:

“Orders Over $500 are eligible for Free Shipping”
“Orders Over $500 receive 5% discount”
“Your Membership is valid for 1 Year”
“Delivery may take 5-10 Business days after Order Processing”
“Delivery may be delayed due to Christmas sale!”
“Free shipping for all over Italy.”

To add custom content in order summary in checkout page in Magento 2 may not be easier as one cannot put anything static inside the checkout page. It is because the whole checkout process is loaded dynamically in Magento 2.

However, you can follow the below steps for customizing the checkout page:

Steps to Add Custom Content in Order Summary on Checkout Page in Magento 2

1. Add the below code in checkout_index_index.xml file at app\code\Vendor\Module\view\frontend\layout.

<?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">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom_text_summary"
                   template="Vendor_Module::checkout/custom_text.phtml"/>
        </referenceContainer>
    </body>
</page>

2. Use the below code in custom_text.phtml at app\code\Vendor\Module\view\frontend\templates\checkout.

<script type="text/javascript">
    window.customText = '<?php echo __('Orders Over $500 are Eligible for Free Shipping'); ?>';
</script>

3. Change or override grand-total.html to theme file located at app\design\Theme\Theme_Name\Magento_Tax\view\frontend\web\template\checkout\summary.

<!-- ko if: isTaxDisplayedInGrandTotal && isDisplayed() -->
<tr class="grand totals incl">
    <th class="mark" scope="row">
        <strong data-bind="i18n: inclTaxLabel"></strong>
    </th>
    <td data-bind="attr: {'data-th': inclTaxLabel}" class="amount">
        <strong><span class="price" data-bind="text: getValue()"></span></strong>
    </td>
</tr>
<tr class="grand totals excl">
    <th class="mark" scope="row">
        <strong data-bind="i18n: exclTaxLabel"></strong>
    </th>
    <td data-bind="attr: {'data-th': exclTaxLabel}" class="amount">
        <strong><span class="price" data-bind="text: getGrandTotalExclTax()"></span></strong>
    </td>
</tr>
<!-- /ko -->
<!-- ko if: !isTaxDisplayedInGrandTotal && isDisplayed() -->
<tr class="grand totals">
    <th class="mark" scope="row">
        <strong data-bind="i18n: title"></strong>
    </th>
    <td data-bind="attr: {'data-th': title}" class="amount">
        <strong><span class="price" data-bind="text: getValue()"></span></strong>
    </td>
</tr>
<!-- /ko -->
<!-- ko if: isBaseGrandTotalDisplayNeeded() && isDisplayed() -->
<tr class="totals charge">
    <th class="mark" data-bind="i18n: basicCurrencyMessage" scope="row"></th>
    <td class="amount">
        <span class="price" data-bind="text: getBaseValue(), attr: {'data-th': basicCurrencyMessage}"></span>
    </td>
</tr>
<!-- /ko -->
<!-- Custom Text -->
<tr class="grand totals">
    <td class="myClass" colspan="2">
        <span data-bind="html: customText"></span>
    </td>
</tr>

The output of the above solution will look as below:

That’s it!

Also Read: How to Configure Zero Subtotal Checkout in Magento 2

Do share this post with Magento Community via social media.

Thank you.