{"id":1591,"date":"2021-02-26T10:30:40","date_gmt":"2021-02-26T10:30:40","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-custom-content-in-order-summary-on-checkout-page-in-magento-2\/"},"modified":"2025-07-17T17:56:58","modified_gmt":"2025-07-17T12:26:58","slug":"add-custom-content-in-order-summary-on-checkout-page-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-content-in-order-summary-on-checkout-page-in-magento-2\/","title":{"rendered":"How to Add Custom Content in Order Summary on Checkout Page in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Checkout in Magento 2 store is a page where merchants can focus their efforts on customer retention.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>The Pareto Principle shows 80% of your profits come from just 20% of customers \u2013&nbsp;<a href=\"https:\/\/www.forbes.com\/sites\/davelavinsky\/2014\/01\/20\/pareto-principle-how-to-use-it-to-dramatically-grow-your-business\/#46abe5273901\" target=\"_blank\" rel=\"noreferrer noopener\">Forbes<\/a><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Customer retention is cheaper than acquisition. Hence, Magento 2 store owners can customize their checkout page in order to increase customer retention.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For instance, Magento 2 store owner may want to add the custom messages like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201cOrders Over $500 are eligible for Free Shipping\u201d<\/li>\n\n\n\n<li>\u201cOrders Over $500 receive 5% discount\u201d<\/li>\n\n\n\n<li>\u201cYour Membership is valid for 1 Year\u201d<\/li>\n\n\n\n<li>\u201cDelivery may take 5-10 Business days after Order Processing\u201d<\/li>\n\n\n\n<li>\u201cDelivery may be delayed due to Christmas sale!\u201d<\/li>\n\n\n\n<li>&nbsp;\u201cFree shipping for all over Italy.\u201d<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To&nbsp;<em><strong>add custom content in order summary in checkout page in Magento 2<\/strong><\/em>&nbsp;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, you can follow the below steps for customizing the checkout page:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add Custom Content in Order Summary on Checkout Page in Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Add the below code in&nbsp;<strong>checkout_index_index.xml<\/strong>&nbsp;file at&nbsp;<strong><strong>app\\code\\Vendor\\Module\\view\\frontend\\layout.<\/strong><\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;referenceContainer name=\"content\">\n            &lt;block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"custom_text_summary\"\n                   template=\"Vendor_Module::checkout\/custom_text.phtml\"\/>\n        &lt;\/referenceContainer>\n    &lt;\/body>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Use the below code in&nbsp;<strong>custom_text.phtml&nbsp;<\/strong>at&nbsp;<strong><strong><strong><strong>app\\code\\Vendor\\Module\\view\\frontend\\templates\\checkout.<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script type=\"text\/javascript\">\n    window.customText = '&lt;?php echo __('Orders Over $500 are Eligible for Free Shipping'); ?>';\n&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">3. Change or override&nbsp;<strong>grand-total.html<\/strong>&nbsp;to theme file located at&nbsp;<strong><strong><strong><strong>app\\design\\Theme\\Theme_Name\\Magento_Tax\\view\\frontend\\web\\template\\checkout\\summary.<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- ko if: isTaxDisplayedInGrandTotal &amp;&amp; isDisplayed() -->\n&lt;tr class=\"grand totals incl\">\n    &lt;th class=\"mark\" scope=\"row\">\n        &lt;strong data-bind=\"i18n: inclTaxLabel\">&lt;\/strong>\n    &lt;\/th>\n    &lt;td data-bind=\"attr: {'data-th': inclTaxLabel}\" class=\"amount\">\n        &lt;strong>&lt;span class=\"price\" data-bind=\"text: getValue()\">&lt;\/span>&lt;\/strong>\n    &lt;\/td>\n&lt;\/tr>\n&lt;tr class=\"grand totals excl\">\n    &lt;th class=\"mark\" scope=\"row\">\n        &lt;strong data-bind=\"i18n: exclTaxLabel\">&lt;\/strong>\n    &lt;\/th>\n    &lt;td data-bind=\"attr: {'data-th': exclTaxLabel}\" class=\"amount\">\n        &lt;strong>&lt;span class=\"price\" data-bind=\"text: getGrandTotalExclTax()\">&lt;\/span>&lt;\/strong>\n    &lt;\/td>\n&lt;\/tr>\n&lt;!-- \/ko -->\n&lt;!-- ko if: !isTaxDisplayedInGrandTotal &amp;&amp; isDisplayed() -->\n&lt;tr class=\"grand totals\">\n    &lt;th class=\"mark\" scope=\"row\">\n        &lt;strong data-bind=\"i18n: title\">&lt;\/strong>\n    &lt;\/th>\n    &lt;td data-bind=\"attr: {'data-th': title}\" class=\"amount\">\n        &lt;strong>&lt;span class=\"price\" data-bind=\"text: getValue()\">&lt;\/span>&lt;\/strong>\n    &lt;\/td>\n&lt;\/tr>\n&lt;!-- \/ko -->\n&lt;!-- ko if: isBaseGrandTotalDisplayNeeded() &amp;&amp; isDisplayed() -->\n&lt;tr class=\"totals charge\">\n    &lt;th class=\"mark\" data-bind=\"i18n: basicCurrencyMessage\" scope=\"row\">&lt;\/th>\n    &lt;td class=\"amount\">\n        &lt;span class=\"price\" data-bind=\"text: getBaseValue(), attr: {'data-th': basicCurrencyMessage}\">&lt;\/span>\n    &lt;\/td>\n&lt;\/tr>\n&lt;!-- \/ko -->\n&lt;!-- Custom Text -->\n&lt;tr class=\"grand totals\">\n    &lt;td class=\"myClass\" colspan=\"2\">\n        &lt;span data-bind=\"html: customText\">&lt;\/span>\n    &lt;\/td>\n&lt;\/tr><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The output of the above solution will look as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot-at-February-8th-2021-11.32.54-am-1024x545.png\" alt=\"how to add custom content in order summary on checkout page in Magento 2\" class=\"wp-image-13223\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Also Read:&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/configure-zero-subtotal-checkout-in-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Configure Zero Subtotal Checkout in Magento 2<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do share this post with Magento Community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1591","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1591"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1591\/revisions"}],"predecessor-version":[{"id":14475,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1591\/revisions\/14475"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}