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

  1.  Use the below code in the catalog_category_view.xml file at app/code/Vendor/Module/view/frontend/layout

  2. Now you need to create list.phtml at location app/code/Vendor/Module/view/frontend/templates/product

That’s all!

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.

5
(based on 9 Reviews)
How to Override Category View Page in Magento 2Author Magento Badge

Sanjay Jethva

Sanjay is a co-founder at Meetanshi. He is a Certified Magento Developer who loves creating Magento E-commerce solutions. Owing to his contributions in Magento Forums and posting solutions, he is among the top 50 contributors of the Magento community in 2019. When he is not engrossed with anything related to Magento, he loves to play cricket.

3 Comments

  • priya

    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.

    • Sanjay Jethva

      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

    • Sanjay Jethva

      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

Leave a Reply

Your email address will not be published.