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.

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:

  1. Create a new custom.html template in the directory : [Vendor]/[Module]/view/frontend/web/template/form/element
  2. Create a new [Vendor]/[Module]/view/frontend/layout/checkout_index_index.xml

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.

5
(based on 5 Reviews)
How to Add Custom Template on Magento 2 Checkout Page

Sanjay Jethva

Sanjay is a co-founder at Meetanshi. He is a Certified Magento Developer who loves creating Magento E-commerce solutions. Owing to his contributions in Magento Forums and posting solutions, he is among the top 50 contributors of the Magento community in 2019. When he is not engrossed with anything related to Magento, he loves to play cricket.

2 Comments

  • oda0177

    [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

Leave a Reply

Your email address will not be published. Required fields are marked *