How to Override Category View Page in Magento 2
Overriding a category view page can be considered as one of the most common tasks for a developer who works on adding functionalities in the category view page in the Magento 2 platform.
As it is well known that customizing the core Magento 2 functionality is a bad coding practice. Thus, it is advisable to override the file instead of modifying any default Magento file.
For instance, you have created a module that adds a button on the category page which prints all the product data in CSV format. In that case, you need to override category view page in Magento 2 to add a well-functioned button on the category view page.
Use the below method and add any custom functionality on the category view page as per your requirement.
Method to Override Category View Page in Magento 2
- Use the below code in the catalog_category_view.xml file at app/code/Vendor/Module/view/frontend/layout
1234567891011<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"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">Vendor_Module::product/list.phtml</argument></action></referenceBlock></body></page> - Now you need to create list.phtml at location app/code/Vendor/Module/view/frontend/templates/product
That’s all! Likewise you can also override product view page social meta tags Magento 2, as a store owner it will help you to hide social meta tag or dynamically change content of social meta tags.
I’ve tried to keep it simple. However, if you find any doubts about the implementation of the above solution, do mention them in the Comments section below.
I’d be glad to help you out.
Feel free to share the post with fellow developers via social media.
You can also refer to the relevant solution to override block, model, and controller in Magento 2 and override a phtml file using a custom module in Magento 2 that I posted earlier.
Thanks.
Sanjay Jethva
Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe.
His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.
3 Comments
please Provide how to get Custom Product Attribute value(in a custom block) in Product listing page or catalog_category_view.xml.
Is it write way to ovveride list.html using Module or app/design/frontend/Custom/theme is a correct way ..?
and provide with whole details . We all are Suffering badly.
Hello Priya,
It would be better to override the list.html using module rather than the theme as if you upgrade the theme in future, it can be changed.
Regarding your custom product attribute value query, we’ll upload the blog on that in the future.
Do subscribe to Meetanshi’s blog posts to get notified for the same.
Thank You
Hello Priya,
It would be better to override the list.html using module rather than the theme as if you upgrade the theme in future, it can be changed.
Regarding your custom product attribute value query, we’ll upload the blog on that in the future.
Do subscribe to Meetanshi’s blog posts to get notified for the same.
Thank You