How to Add Custom Template on Magento 2 Checkout Page
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.
However, it can take a toll on you for customizing Magento 2 checkout page. Hence, I’ve posted the solution to add custom template on Magento 2 checkout page.
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.
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 use advanced techniques to speed up your store checkout.
You can start by implementing the below method to add features such as order attachment!
Steps to Add Custom Template on Magento 2 Checkout Page:
- Create a new custom.html template in the directory : [Vendor]/[Module]/view/frontend/web/template/form/element
123456789101112<!-- input field element and corresponding bindings --><input class="input-text" type="text" data-bind="value: value,valueUpdate: 'keyup',hasFocus: focused,attr: {name: inputName,placeholder: placeholder,'aria-describedby': noticeId,id: uid,disabled: disabled}" /> - Create a new [Vendor]/[Module]/view/frontend/layout/checkout_index_index.xml
1234567891011121314151617181920212223242526272829303132333435363738394041<?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><referenceBlock name="checkout.root"><arguments><argument name="jsLayout" xsi:type="array"><item name="components" xsi:type="array"><item name="checkout" xsi:type="array"><item name="children" xsi:type="array"><item name="steps" xsi:type="array"><item name="children" xsi:type="array"><item name="shipping-step" xsi:type="array"><item name="children" xsi:type="array"><item name="shippingAddress" xsi:type="array"><item name="children" xsi:type="array"><!-- The name of the form the field belongs to --><item name="shipping-address-fieldset" xsi:type="array"><item name="children" xsi:type="array"><!-- the field you are customizing --><item name="telephone" xsi:type="array"><item name="config" xsi:type="array"><!-- Assigning a new template --><item name="elementTmpl" xsi:type="string">[Vendor]_[Module]/form/element/custom.html</item></item></item></item></item></item></item></item></item></item></item></item></item></item></argument></arguments></referenceBlock></body></page>
That’s it.
You may mention your doubts, if any, about the topic in the Comments section below and I’d help you out.
Feel free to share the solution with fellow developers and store owners interested in optimizing the checkout page!
Thank you.
![Magento 2 SEO: The Ultimate Guide [2022]](jpg/magento-2-seo-the-ultimate-guide.jpg)
2 Comments
[ERROR] Failed to load the “//form/element/custom.html” template requested by “checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.telephone”.
Help please with this issue
Hello oda,
Have you run commands of static content deploy, caching after creating files and applying codes?
Thank You.