How to Change Category Page Layout for Specific Category Only in Magento 2

How to Change Category Page Layout for Specific Category Only in Magento 2

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!

Previous Article

MageComp Biggest 7th Birthday Bash! Don't Miss Our Bumper Loot Sale!

Next Article

Fixed: Magento 2 Backend Not Working (updated)

View Comments (2)
  1. Santhosh Kumar CA

    But different environments have different category ids for same category names. In that case how consistently this implementation works?

    1. 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.

Leave a Comment

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

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨