Magento – How to change product pages structure , layout for multiple categories in magento 2

categorylayoutmagento2producttheme

I want to change product page structure and layout by categories wise, high customization. For example if I have 3 categories then it should have 3 different category page view.

(whatever I change should reflect on each category page).

Best Answer

I'm slightly confused as to what your requirements are, it sounds like you want to customise the layout for every category page?

If so the easiest way to achieve this is to use layout XML.

  1. Create /app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_category_view.xml

  2. Make your layout changes here.

  3. Clear Magento cache if it's enabled

For example:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="category.view.container" destination="content" before="category.products" />

        <referenceBlock name="category.view.container">
            <block
                class="Magento\Framework\View\Element\Template"
                name="layered.nav.trigger"
                as="layeredNavTrigger"
                template="Magento_Catalog::category/layered-nav-trigger.phtml"
                before="-"/>
        </referenceBlock>

        <referenceContainer name="footer-container">
            <block class="Magento\Framework\View\Element\Template" name="category.sticky.banner" template="Magento_Catalog::sticky-banner.phtml" before="footer.social">
                <block class="Magento\Cms\Block\Block" name="category.sticky.banner.block">
                    <arguments>
                        <argument name="block_id" xsi:type="string">category-sticky-banner</argument>
                    </arguments>
                </block>
            </block>
        </referenceContainer>
    </body>
</page>

Here I am moving 1 element and adding a few new blocks to every category page.