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
- Add the below code in checkout_index_index.xml file at app\code\Vendor\Module\view\frontend\layout.
12345678910<?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> - Use the below code in custom_text.phtml at app\code\Vendor\Module\view\frontend\templates\checkout.
123<script type="text/javascript">window.customText = '<?php echo __('Orders Over $500 are Eligible for Free Shipping'); ?>';</script> - Change or override grand-total.html to theme file located at app\design\Theme\Theme_Name\Magento_Tax\view\frontend\web\template\checkout\summary.
123456789101112131415161718192021222324252627282930313233343536373839404142<!-- 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!
If you need more help regarding this post, feel free to ask in the Comments section below.
I would be happy to solve your queries.
Also Read: How to Configure Zero Subtotal Checkout in Magento 2
Do share this post with Magento Community via social media.
Thank you.
4 Comments
what’s the name of Theme and ThemeName.
Hello Vicky,
If you’ve installed any third party theme or using the default Magento luma theme then the theme name would be something like: app\design\Magento\luma\
Thank You
Hi Chandresh Chohan,
i have apply module but is is not working for me,
can you guide me how we can add custom block on checkout page after order amount ?
Hello,
Are you applying the above code in your custom module?
If yes, then you have to use your custom module instead of Vendor\Module.
Also, if you are using the grand-total.html file of a theme other than the Luma theme, you need to override or change that file in your theme too.
Thank you.