While development, most of the times, we need to change/add code in the template file (.phtml file). In this case, we can not modify the core template file, so what we will do is we will override the template file in the module.
There are two ways to override the phtml file in Magento2.
- Override a phtml file in a theme in Magento 2
- Override a phtml file in a custom module in Magento 2
Here, I’ll show you how to override a phtml file in a custom module in Magento 2.
Let’s take example of the Module Newsletter, consider we need to make changes in the subscribe.phml file
ORIGINAL TEMPLATE:
vendor/magento/module-newsletter/view/frontend/templates/subscribe.phtml
ORIGINAL LAYOUT:
vendor/magento/module-newsletter/view/frontend/layout/default.xml
ORIGINAL BLOCK in LAYOUT (where this template assigned to):
<referenceContainer name="footer">
<block class="Magento\Newsletter\Block\Subscribe" name="form.subscribe" as="subscribe" before="-" template="Magento_Newsletter::subscribe.phtml" ifconfig="newsletter/general/active"/>
</referenceContainer>
Override a phtml file in a custom module in Magento 2:
- Create file registration.php at app/code/VendorName/ModuleName
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'VendorName_ModuleName', __DIR__ );
- Create module.xml file at app/code/VendorName/ModuleName/etc/
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="VendorName_ModuleName" setup_version="0.0.1"> <sequence> <module name="Magento_Newsletter" /> </sequence> </module> </config> - Create your own layout with the same handle
app/code/VendorName/ModuleName/view/frontend/layout/default.xml
Put there code with <referenceBlock> tag and original “name” of this block where you can redefine path to your custom template (be carefull with paths, they starts from view/frontend/templates in declared module) like
<?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="form.subscribe" template="VendorName_ModuleName::subscribe.phtml"/>
</body>
</page>
4. Create your custom template in your module with a mentioned name: app/code/VendorName/ModuleName/view/frontend/templates/subscribe.phtml
and copy the content from original file located at vendor/magento/module-newsletter/view/frontend/templates/subscribe.phtml to your module subscribe.phtml and can modify as per the requirement.
5. Run the below commands:
php bin/magento se:up && php bin/magento se:s:d -f && php bin/magento c:f
Watch the step by step guide for overriding template file in custom module in below video:
That’s it!
The above example shows how to override a phtml file for newsletter subscribe in the footer.
Please share your doubts on the topic in the Comments section below. I’d be happy to help.
Thank you.