{"id":583,"date":"2019-09-04T08:31:52","date_gmt":"2019-09-04T08:31:52","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/09\/04\/add-custom-template-on-magento-2-checkout-page\/"},"modified":"2025-05-22T16:02:43","modified_gmt":"2025-05-22T10:32:43","slug":"add-custom-template-on-magento-2-checkout-page","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-template-on-magento-2-checkout-page\/","title":{"rendered":"How to Add Custom Template on Magento 2 Checkout Page"},"content":{"rendered":"\n

Checkout page enhancements in Magento 2 store is one of the best ways to increase conversion rates, and help the shopper, experience a smooth purchase process.<\/p>\n\n\n\n

However, it can take a toll on you for customizing Magento 2 checkout page. Hence, I\u2019ve posted the solution to add custom template on Magento 2 checkout page<\/strong>.<\/p>\n\n\n\n

For example, you can add an input field on the checkout page that allows the customers to add attachments. Or, you can add a notice or form field using this method.<\/p>\n\n\n\n

According to Baymard, the complicated checkout process is the third highest reason constituting of 26% for cart abandonment. Therefore, streaming the checkout flow and improving the checkout page can be helpful to fix this issue. Also if your Checkout is slow in Magento 2<\/a> use advanced techniques to speed up your store checkout.<\/p>\n\n\n\n

You can start by implementing the below method to add features such as order attachment!<\/p>\n\n\n\n

Steps to Add Custom Template on Magento 2 Checkout Page:<\/h2>\n\n\n\n

1. Create a new custom.html<\/strong> template in the directory : [Vendor]\/[Module]\/view\/frontend\/web\/template\/form\/element<\/em><\/strong><\/p>\n\n\n\n

<!-- input field element and corresponding bindings -->\n<input class=\"input-text\" type=\"text\" data-bind=\"\n    value: value,\n    valueUpdate: 'keyup',\n    hasFocus: focused,\n    attr: {\n        name: inputName,\n        placeholder: placeholder,\n        'aria-describedby': noticeId,\n        id: uid,\n        disabled: disabled\n    }\" \/><\/pre>\n\n\n\n
2.Create a new [Vendor]\/[Module]\/view\/frontend\/layout\/checkout_index_index.xml<\/em><\/strong><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceBlock name=\"checkout.root\">\n            <arguments>\n                <argument name=\"jsLayout\" xsi:type=\"array\">\n                    <item name=\"components\" xsi:type=\"array\">\n                        <item name=\"checkout\" xsi:type=\"array\">\n                            <item name=\"children\" xsi:type=\"array\">\n                                <item name=\"steps\" xsi:type=\"array\">\n                                    <item name=\"children\" xsi:type=\"array\">\n                                        <item name=\"shipping-step\" xsi:type=\"array\">\n                                            <item name=\"children\" xsi:type=\"array\">\n                                                <item name=\"shippingAddress\" xsi:type=\"array\">\n                                                    <item name=\"children\" xsi:type=\"array\">\n                                                        <!-- The name of the form the field belongs to -->\n                                                        <item name=\"shipping-address-fieldset\" xsi:type=\"array\">\n                                                            <item name=\"children\" xsi:type=\"array\">\n                                                                <!-- the field you are customizing -->\n                                                                <item name=\"telephone\" xsi:type=\"array\">\n                                                                    <item name=\"config\" xsi:type=\"array\">\n                                                                        <!-- Assigning a new template -->\n                                                                        <item name=\"elementTmpl\" xsi:type=\"string\">[Vendor]_[Module]\/form\/element\/custom.html<\/item>\n                                                                    <\/item>\n                                                                <\/item>\n                                                            <\/item>\n                                                        <\/item>\n                                                    <\/item>\n                                                <\/item>\n                                            <\/item>\n                                        <\/item>\n                                    <\/item>\n                                <\/item>\n                            <\/item>\n                        <\/item>\n                    <\/item>\n                <\/argument>\n            <\/arguments>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
Feel free to share the solution with fellow developers and store owners interested in optimizing the checkout page!<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
Checkout page enhancements in Magento 2 store is one of the best ways to increase conversion rates, and help the shopper, experience a smooth purchase…<\/p>\n","protected":false},"author":5,"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-583","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/583","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=583"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/583\/revisions"}],"predecessor-version":[{"id":15284,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/583\/revisions\/15284"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}