Add a custom template for a form field on Checkout page
What's in this topic
This topic describes how to replace the HTML template for a form field on the Checkout page. You might need to replace the template in order to add elements displayed with the field, change the CSS class assigned to it, add attributes and so on.
The forms used on the Checkout page are implemented using Knockout JS.
To change the template of the form field, do the following:
- Create a custom HTML template for knockout JS script that will render the form field.
- Specify the new template in the Checkout page layout.
There are more details about each step in the following sections.
Set Magento to the developer mode while you perform all customizations and debugging.
For the sake of compatibility, upgradability, and easy maintenance, do not edit the default Magento code. Instead, add your customizations in a separate module. For your checkout customization to be applied correctly, your custom module should depend on the Magento_Checkout module.
Do not use
Ui for your custom module name, because
%Vendor%_Ui notation, required when specifying paths, might cause issues.
Implement the HTML template for the field
Create a new
<your_template>.html template in the following directory:
Example of a field template:
The original templates of all form field types are located in the
Specify the new template in layout
In your custom module directory, create a new
In this file, add content similar to the following:
Modifying the custom template after it was applied
If you modify your custom
.html template after it was applied on the store pages, the changes will not apply until you do the following:
- Delete all files in the
- Reload the pages.