Magento – Magento 2 customizing category page

category-viewlayoutmagento2

I want to customize the category page and I am using the below file path:

app\design\frontend\Vendor\Theme\Magento_Catalog\layout\catalog_category_view.xml

Below is xml file code:

<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="page.top">
         <block class="Magento\Catalog\Block\Category\View" name="category_banner" template="category/banner.phtml" ifconfig="porto_settings/category/category_description" before="-"/>   
    </referenceContainer>
    <referenceContainer name="content">
        <block class="Magento\Catalog\Block\Category\View" name="category_desc_main_column" template="category/desc_main_column.phtml" ifconfig="porto_settings/category/category_description" before="category.products"/>
    </referenceContainer>
    <move element="category.image" destination="content" before="category_desc_main_column"/>
    <referenceContainer name="sidebar.main">
    </referenceContainer>
    <referenceContainer name="sidebar.additional" remove="true" />
</body>

I have gone to the admin panel and Enabled Template Path Hints for Storefront but I can't find any file which I can add my custom element before section element.

When I go to the inspect element it's creating the below HTML structure:

inspect element

I want to move the breadcrumbs div in the section and want to add
two new DIV's before section element.

How I can edit the catalog_category_view.xml file code. Please help.

Best Answer

To add two new divs before the section element try this layout xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.top">
            <container name="div-one" before="navigation.sections" htmlTag="div" htmlClass="div-one">
                <block class="Magento\Framework\View\Element\Text">
                    <arguments>
                        <argument name="text" xsi:type="string">One</argument>
                    </arguments>
                </block>
            </container>
            <container name="div-two" before="navigation.sections" htmlTag="div" htmlClass="div-two">
                <block class="Magento\Framework\View\Element\Text">
                    <arguments>
                        <argument name="text" xsi:type="string">Two</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

You can move the breadcrumbs into navigation-sections like this:

<move element="breadcrumbs" destination="store.menu"/>

However, there's a css rule that prevents it from displaying so you need to make a new rule for it:

.nav-sections .breadcrumbs {
    display: block;
}

Update

Here how to get nested divs with breadcrumbs and sections inside.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.top">
            <container name="divone" htmlTag="div" htmlClass="divone">
                <container name="divtwo" htmlTag="div" htmlClass="divtwo">
                </container>
            </container>
        </referenceContainer>

        <move element="navigation.sections" destination="divtwo"/>
        <move element="breadcrumbs" destination="divtwo" before="navigation.sections"/>
    </body>
</page>
Related Topic