Hello Magento Friends,
How are you all? Today I will deliver a solution on How to Change Category Page Layout for Specific Category Only in Magento 2.
Sometimes you need to change the layout or design for some specific category, while other categories remain the same in Magento 2. Or sometimes you need to temporarily change the design for some specific category in Magento 2. Then, the following code will help to accomplish your requirement.
Let’s proceed,
Steps to Change Category Page Layout for Specific Category Only in Magento 2:
Step 1: First you need to add the following file.
app\design\frontend\Themes\Yourtheme\Magento_Catalog\layout\catalog_category_view_id_{{id}}.xml
NOTE: Here you need to replace {{id}} with real category id
Now, add the below code,
<?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>
<referenceContainer name="columns.top">
<container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
<block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml">
<arguments>
<argument name="image" xsi:type="object">Magento\Catalog\ViewModel\Category\Image</argument>
<argument name="output" xsi:type="object">Magento\Catalog\ViewModel\Category\Output</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
<block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>
</container>
</referenceContainer>
<referenceContainer name="content">
<block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml">
<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/customlist.phtml"> <!-- Here you need to add your custom list file -->
<container name="category.product.list.additional" as="additional" />
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
name="category.product.addto.compare" as="compare"
template="Magento_Catalog::product/list/addto/compare.phtml"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
</block>
<action method="setToolbarBlockName">
<argument name="name" xsi:type="string">product_list_toolbar</argument>
</action>
</block>
</block>
<block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
<arguments>
<argument name="triggers" xsi:type="array">
<item name="compareProductLink" xsi:type="string">.action.tocompare</item>
</argument>
</arguments>
</block>
</referenceContainer>
<referenceBlock name="page.main.title">
<arguments>
<argument name="id" xsi:type="string">page-title-heading</argument>
<argument name="add_base_attribute_aria" xsi:type="string">page-title-heading toolbar-amount</argument>
</arguments>
<block class="Magento\Catalog\Block\Category\Rss\Link" name="rss.link" template="Magento_Catalog::category/rss.phtml"/>
</referenceBlock>
</body>
</page>
Step 2: Now you need to add the following file.
app\design\frontend\Themes\Yourtheme\Magento_Catalog\templates\product\ customlist.phtml
Note: Now you can add your custom code or design in this file for your custom product list for a specific category.
Conclusion:
Hence, this way you can Change Category Page Layout for Specific Category Only in Magento 2. If you come across any issues with the above code, mention them in the comment section. I will help you to solve it. Do not forget to share the article amongst your friends’ group and stay in touch with us!
Happy Coding!
But different environments have different category ids for same category names. In that case how consistently this implementation works?
If both the environment have different categories Id, then you need to implement this for each separately because category Id is needed for this one.