Magento 2 how to override template

March 22, 2022April 24, 2023 Hilary howard

Override template is the simplest and fastest solution to create custom templates for each store. In the following article, we will learn Magento 2 how to override template. Assume that you have read through and practiced the articles create Magento 2 extension and create Magento 2 theme or are knowledgeable about it.

1. override template file on your theme folder

This solution is the simplest, you only need copy file need override from module to your theme folder. For example if you want change content on list.phtml from module magento catalog you can copy file list.phtml form vendor\magento\module-catalog\view\frontend\templates\product to <your theme path>\Magento_Catalog\templates\product

On our example we will copy file topbanner.phtml from \app\code\Magerubik\Themeoptions\view\frontend\templates to \app\design\frontend\Magerubik\rubikshop\Magerubik_Themeoptions\templates then update it with below content to check it working

<?php
$themeConfig = $this->helper('Magerubik\Themeoptions\Helper\Data');
$media = $this->helper('\Magento\Cms\Helper\Wysiwyg\Images')->getBaseUrl();
?>
<div class="top_banner">
	<img src="<?= $media . 'themeoptions/' .$themeConfig-> getConfig('mrThemes/general/top_banner_image');?>"/>
	<div class="capption">
		Add your content here
	</div>
</div>
<style>
.top_banner {position: relative;}
.top_banner > img {width: 100%;max-height: 300px;object-fit: cover;}
.top_banner .capption {position: absolute;bottom: 15px;font-weight: 600;text-align: center;width: 100%;}
</style>

Now go to frontend if you see the below screenshot everything is fine.

2. override template file from layout file

This solution use file layout to replate the path template to a new path.

Continuous our example we will create file default.xml file at the path \app\design\frontend\Magerubik\rubikshop\Magerubik_Themeoptions\layout then add below content.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="magerubik-topbanner">
            <action method="setTemplate">
				<argument name="template" xsi:type="string">Magerubik_Themeoptions::new_topbanner.phtml</argument>
			</action>
        </referenceBlock>
    </body>
</page>

After create file new_topbanner.phtml file at the path \app\code\Magerubik\Themeoptions\view\frontend\templates with below content to check it working.

<?php
$themeConfig = $this->helper('Magerubik\Themeoptions\Helper\Data');
$media = $this->helper('\Magento\Cms\Helper\Wysiwyg\Images')->getBaseUrl();
?>
<div class="top_banner">
	<img src="<?= $media . 'themeoptions/' .$themeConfig-> getConfig('mrThemes/general/top_banner_image');?>"/>
	<div class="capption">
		was override from xml file
	</div>
</div>
<style>
.top_banner {position: relative;}
.top_banner > img {width: 100%;max-height: 300px;object-fit: cover;}
.top_banner .capption {position: absolute;bottom: 15px;font-weight: 600;text-align: center;width: 100%;}
</style>

Now go to frontend if you see the below screenshot everything is fine.

Here are 2 simple solution Magento 2 how to override template. Magento 2 provides many solutions to override templates that we will talk about in another article. In the next posts we will learn how to Override Magento 2 layout. Contact us if you face any problems during the installation process.

You can download the demo code for this entire series from GitHub