Magento – Magento 2: How to move category description to main column

categorycategory-descriptionmagento2xml

How can I move the category description from top of the page into main column of the category page just above product list toolbar?

I guess it should be doable by extending the catalog_category_view.xml in

app/design/frontend/{Company}/{Theme}/Magento_Catalog/layout

but for some reason I can't manage to do that with move element tag.

I have this in my

app/design/frontend/{Company}/{Theme}/Magento_Catalog/layout/catalog_category_view.xml

<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.description" destination="category.products" />
  </body>
</page>

And this in my

app/design/frontend/{Company}/{Theme}/Magento_Catalog/templates/category/products.phtml

<?php echo $block->getChildHtml('category.description'); ?>
<?php if (!$block->isContentMode() || $block->isMixedMode()): ?>
   <?php echo $block->getProductListHtml() ?>
<?php endif; ?>

Best Answer

Personally I did it this way:

<move element="category.description" destination="category.image" />

And then inside:

Magento_Catalog/templates/category/image.phtml

Called:

<?php echo $block->getChildHtml('category.description'); ?>

Because I wanted it inside the image, but you could put it just below instead.

I'm sure there's a better way but can't check atm.

Related Solutions

Magento – magento 2 captcha not rendering if I override layout xml

Anyway I have solved it myself.The captcha is not rendering due to I haven't override captcha layout xml so overriding it to your theme will solved issue.

Magento – Magento 2 customizing category page

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>

Best Answer

Related Solutions

Magento – magento 2 captcha not rendering if I override layout xml

Magento – Magento 2 customizing category page

Related Topic