Magento 2 : How to Change Category Page Layout for Specific Category Only?

Step 1: First you need to add the following file.

app\design\frontend\Magemonkeys\Customtheme\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>

<?xml version="1.0"?>

<body>

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

</container>

</referenceContainer>

</block>

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

<argument name="name" xsi:type="string">product_list_toolbar</argument>

</action>

</block>

<item name="compareProductLink" xsi:type="string">.action.tocompare</item>

</argument>

</arguments>

</block>

</referenceContainer>

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

</referenceBlock>

</body>

</page>

Step 2: Now you need to add the following file.

app\design\frontend\Magemonkeys\Customtheme\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. Hope that helps.

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-63e095533e586763718454/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Magento 2 Developer

Hire H. Shingala

Let’s have a call

Fill the form & Get Installation Support