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:
1. Create a new custom.html template in the directory : [Vendor]/[Module]/view/frontend/web/template/form/element
<!-- 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
}" />
2.Create a new [Vendor]/[Module]/view/frontend/layout/checkout_index_index.xml
<?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.
Feel free to share the solution with fellow developers and store owners interested in optimizing the checkout page!
Thank you.
