Magento 2.2 – Move Category Title Above Description

categorylayoutmagento2template

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                    |
|_______________________________|
|          |                    |
|(sidebar) | (main content)     |
|          |                    |
|          |                    |
|__________|____________________|

I'd like for it to be like this:

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

Thank you.

Best Answer

There are two ways to achieve this.

If you want it to affect all of your category pages for that create your own theme at below location

app/design/frontend/Package/theme in that create a file with name catalog_category_view.xml at below location

app/design/frontend/Package/theme/Magento_Catalog/view/frontend/layout

And put this code there in the file catalog_category_view.xml

<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>
    <move element="columns.top" destination="content" before="-"/>
    </body>
</page>

To just have this change in to a single category do following tasks

Just go to you admin & traverse at below location

Catalog > Category > Your Category > Design

At there do following changes

set Layout > 2 Columns with left bar

Put below content at Layout Update XML
<page>
    <body>
       <move element="columns.top" destination="content" before="-"/>
    <body>
</page>

If still facing some issue do mention below

Note: Don't forget to make catch disabled when doing this task otherwise perform the following command into your terminal from your magento root directory
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f

Thank You Happy Coding!

Related Solutions

Magento – Adding category title, image and description to above layered nav

You can retrieve the active category and output it's values

$category = Mage::registry('current_category');
echo $category->getName();
echo $category->getDescr();
// etc

This can be done from any existing PHTML file that is placed there or by adding your own file like so:

local.xml

<catalog_category_layered>
    <reference name="left">
        <block type="core/template" name="top_cat_title" before="-" template="catalog/category/custom_title.phtml"/>
    </reference>
</catalog_category_layered>

Now create a PHTML file in the templates catalog/category directory called custom_title.phtml and add the above PHP code.

This will display the current category data for you

Magento 1.9 – How to Move Page Title Above Breadcrumbs for Category Pages

To rephrase your question: You want to add the title above the breadcrumb only but on all category pages.

If you want to solve this via layout.xml (which is the best way), you have to remove the Headline from the template/catalog/category/view.phtmlsince it is nested there. After you add a template named headline.phtml in the same folder. You then add this block where you want to have it. The example below adds it to both types of category display:

      <catalog_category_layered translate="label">
                ...
            <reference name="root">
                <block type="catalog/category_view" name="category.headline" as="category-headline" template="catalog/category/headline.phtml"/>
            </reference>
                ...
       </catalog_category_layered>
      <catalog_category_default >
                ...
            <reference name="root">
                <block type="catalog/category_view" name="category.headline" as="category-headline" template="catalog/category/headline.phtml"/>
            </reference>
                ...
       </catalog_category_default>

Now you add the your new block to i.E. to 1column.html as ` getChildHtml('category-headline') ?>

I haven't tested it but otherwise search for "Add phtml block to Magento"

Best Answer

Related Solutions

Magento – Adding category title, image and description to above layered nav

Magento 1.9 – How to Move Page Title Above Breadcrumbs for Category Pages

Related Topic