1

I'm just diving into template/block/layout customization in Magento 2.2 and I'd like to move my category title from being left aligned to being aligned above the description.

Currently it's like this:

_________________________________
|                               |
| Page Title                    |
| Description                   |
|_______________________________|
|          |                    |
|(sidebar) | (main content)     |
|          |                    |
|          |                    |
|__________|____________________|

I'd like for it to be like this:

_________________________________
|                               |
| Page Title                    |
|_______________________________|
|          |                    |
|(sidebar) | (main content)     |
|          |                    |
|          |                    |
|__________|____________________|
|                               | 
| Page Title                    |
| Description                   |
|_______________________________|

Thank you.

2

You can create an empty container in main.content.You can move description and add additional title in it.

Create:

app/design/frontend/{Package}/{theme}/Magento_Catalog/layout/catalog_category_view.xml

with following content:

<?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="main.content">
            <container name="after_main" label="After Main Content" htmlTag="div" htmlClass="after-main" after="-">
                <block class="Magento\Theme\Block\Html\Title" name="title.additional" template="Magento_Theme::html/title.phtml">
                    <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>
            </container>
        </referenceContainer>

        <move element="category.description" destination="after_main" after="title.additional" />

    </body>
</page>

Description: Above code will create a new container after_main with class after_main. We have added new page title. Also we have move existing category description to this new container.

  • This is exact what I am after, is there anywhere that references the different layout xml files etc.. – Boss Nass Feb 3 at 5:56
  • I am not getting your point. could please explain with example ? – Pawan Feb 3 at 6:15
  • Like a standard library of all the different templates/files that can be used to make overrides. Also do you know if its possible to change the above code so that the bottom title uses h2 instead of h1? – Boss Nass Feb 3 at 6:16
  • 1
    You can change title.phtml to new.title.phtml in above code. copy mage2Root/vendor/magento/module-theme/view/frontend/templates/html/title.phtml to app/design/frontend/{Package}/{theme}/Magento_Theme/templates/html/new.title.phtml Now you can change from h1 to h2 – Pawan Feb 3 at 6:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.