21

I want to customize product details page, So it required to override some .phtml files in following locations.

So I want to know, how to override .phtml files in vendor\magento\module-catalog\view\frontend\templates\product or vendor\magento\module-theme\view

Improve this question

8 Answers 8

Reset to default
29

Sometimes we need to make modifications to existing templates. Instead of making changes directly to existing template files, we should override them in our own theme. Let us assume that we want to update the category listing page ( list.phtml ). To do so, create following directory structure:

app/design/frontend/Mycompany/Basic/Magento_Catalog/templates/product

Here I assume that our current theme is Basic. Now copy the list.phtml file into product directory from the following location:

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

Now you can make any modifications you want to your overridden file.

For detail please read this tutorial it's help you lot.

Improve this answer
4
  • 2
    Hi, I just overrides the list.phtml file in the following path, \app\design\frontend\Magento\luma\Magento_Catalog\templates\product\list.phtml. But it hasn't worked. Can I know where I did wrong?
    – Vigna S
    Commented Oct 5, 2016 at 6:21
  • Same problem, no matter how many times i hit refresh the default one is loaded over my custom one. And YES i have the correct path before anyone asks, but I am using composer to install magento so the defaults are in different locations if that matters.
    – Dustin Poissant
    Commented May 4, 2018 at 15:35
  • I had to clear the html block cache and then this worked perfectly for me! (I clear cache like this blog.gardenhouse.io/2018/05/29/…)
    – paul
    Commented Jun 13, 2018 at 21:16
  • How to override the template from your module though?
    – Black
    Commented Oct 22, 2019 at 10:00
10

To Override pthml and layout files from

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

into

app/code/Mycompany/OverideCatalog/view/frontend/templates/product/list.phtml

Layout:

vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml

into

app/code/Mycompany/OverideCatalog/view/frontend/layout/catalog_category_view.xml

<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Mycompnay_OverideCatalog::product/list.phtml">
Improve this answer
1
  • This response is good for my needs but could have some more explanation.
    – Gustavo Ulyssea
    Commented Aug 14, 2020 at 23:42
9

I am answering my own question,

I found out how to override the .phtml files in the locations mentioned in my question,

You have to put them in following locations to override the original files

app\design\frontend\<VENDOR_NAME>\<THEME_NAME>\Magento_Catalog\templates\product\view

And I believe the theory is same for overriding any other .phtml files in Magento 2

Improve this answer
2
  • Could you please brief more...Like i have to copy my custom phtml file into the theme folder isit? like into app\design\frontend\<VENDOR_NAME>\luma\Magento_Catalog\ Should i have to create my Vendor folder and copy the core phtml file into it? If by doing so, no need of templates in view folder?
    – Sushivam
    Commented Aug 18, 2016 at 9:41
  • Hi, I am trying to override a phtml file for a widget, and I'm not sure the path I have used is correct. Is the Magento_Catalog part of your path specific to the module folder you are overriding? So, if I am overriding the vendor\magento\module-catalog-widget\view\frontend\templates\product\widget\content, would I replace Magento_Catalog in your instance with Magento_Catalog_Widget in my instance? Slightly confused as it isn't clear to me yet.
    – robgt
    Commented May 11, 2017 at 10:10
8

To override phtml, layout and web files to own custom theme

1) To Override template file:

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

Follow this path

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/list.phtml

2) To Override layout file:

vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml

Follow this path

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

Improve this answer
1
  • How to override/customize other module files like Observer, Controller etc?
    – Tahir Yasin
    Commented Oct 2, 2017 at 13:08
5

If you need to override ONLY some template just use <referenceBlock> in your module layout file. For example, you need to overwrite next template

ORIGINAL TEMPLATE:
vendor/magento/module-customer/view/frontend/templates/form/edit.phtml

ORIGINAL LAYOUT:
vendor/magento/module-customer/view/frontend/layout/customer_account_edit.xml

ORIGINAL BLOCK in LAYOUT (where this template assigned to):

<block class="Magento\Customer\Block\Form\Edit" name="customer_edit" template="Magento_Customer::form/edit.phtml" cacheable="false">
            <container name="form.additional.info" as="form_additional_info"/>
</block>


OVERRIDING PROCESS

  1. Create your own layout with the same handle
    app/code/YourVendor/YourModule/view/frontend/layout/customer_account_edit.xml
  2. 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="customer_edit" 
template="YourVendor_YourModule::form/edit.phtml"/>            
</body>
  1. Create your custom template in your module with a mentioned name: app/code/YourVendor/YourModule/view/frontend/templates/form/edit.phtml

That's it!

Improve this answer
3

override templates(phtml) by custom theme

if you want to override vendor\magento\module-catalog\view\frontend\templates\product\some.phtml first you need to create your custom theme, please refer this link for how to create custom theme.

after that create phtml file in your custom theme to override default one

 app/design/frontend/vendor-name/theme-name/Magento_Catalog/templates/product/some.phtml

thats it finally clear the cache of magento as well as browser, then check your page, new phtml file only reflected.

same way you can do for all templates override.

good luck

Improve this answer
1
  • Thanks, I just figured it out and answered the finding in my own questions, your answer is much similar to my findings.
    – nuwaus
    Commented May 21, 2016 at 14:03
2

Open folder : /vendor/magento/theme-frontend-luma/ and copy the module templates and layout files from the view folder.

Then create folders : /app/design/frontend/spacename/Theme/

Then create module folder and then create templates and layout folder.

Insert the templates and layout files from the module view folder.

Improve this answer
2

Classy Llama did a good job on an article that shows multiple situations and how to override template files in each of them.

https://www.classyllama.com/blog/template-override-m2

It helped me when I came to this thread looking for answers.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.