How to Override a Template File in Magento 2

Sometimes we may require making changes in the existing Magento 2 template files (.phtml). Instead of making changes directly to the existing template files, we should override them. Overriding the template file in Magento 2 is very easy and it gives you the flexibility to customize the view as per your requirement. Let us assume that we want to customize the product listing (category page) page ( list.phtml ).

Method 1:

Copy the list.phtml file from the Magento 2 default file location to our theme and do the changes,

The default list.phtml file is present in the following file path,

app/vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

Now, create the directory structure as follows in our theme and copy the above file into our theme,

app/design/frontend/MyCompany/MyTheme/Magento_Catalog/templates/product/list.phtml

here, you can modify the code as you wish.

In the above directory structure,

  • MyCompany => Namespace
  • MyTheme => Theme name

Method 2:

If you are creating a new custom module in Magento 2, the above method will not be used. So, you need to override the template file by using the layout.

First, create the layout file as follows,

File Path: app/code/YourCompanyName/YourModuleName/view/frontend/layout/catalog_category_view.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="category.products.list">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">YourCompanyName_YourModuleName::catalog/product/list.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

In the above code, category.products.list blocks name, whose template file you want to override.

Then, copy the list.phtml file into the following file path,

app/code/YourCompanyName/YourModuleName/view/frontend/templates/catalog/product/list.phtml

Here, you can customize the code as your wish.

Hope this helps.

Leave a Reply

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