0

Using Magento 2.3.5 with Porto Theme and realized the Category Page Title is missing at the top of the Category Page. All other Magento sites I have used has the title displayed towards the top of the page in larger text. (I'm assuming this is what is called the H1 Tag?)

This new site I am working on does not have this and wondering what can be done to get it to display.

From what I have read this the path I need to use, However I am not sure if this is the correct code to use and not sure what to add or change for the title to display: Vendor/Magento/module-theme/view/frontend/html/title.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @var $block \Magento\Theme\Block\Html\Title
 */
$cssClass = $block->getCssClass() ? ' ' . $block->getCssClass() : '';
$titleHtml = '';
if (trim($block->getPageHeading())) {
    $titleHtml = '<span class="base" data-ui-id="page-title-wrapper" '
        . $block->getAddBaseAttribute()
        . '>'
        . $block->escapeHtml($block->getPageHeading())
        . '</span>';
}
?>
<?php if ($titleHtml) : ?>
<div class="page-title-wrapper<?= $block->escapeHtmlAttr($cssClass) ?>">
    <h1 class="page-title"
        <?php if ($block->getId()) : ?> id="<?= $block->escapeHtmlAttr($block->getId()) ?>" <?php endif; ?>
        <?php if ($block->getAddBaseAttributeAria()) : ?>
            aria-labelledby="<?= $block->escapeHtmlAttr($block->getAddBaseAttributeAria()) ?>"
        <?php endif; ?>>
        <?= /* @noEscape */ $titleHtml ?>
    </h1>
    <?= $block->getChildHtml() ?>
</div>
<?php endif; ?>

and Vendor/Magento/module-catalog/view/frontend/layout/catalog_category_view.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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="columns.top">
            <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
                <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/>
                <block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
                <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>
            </container>
        </referenceContainer>
        <referenceContainer name="content">
            <block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml">
                <block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
                    <container name="category.product.list.additional" as="additional" />
                    <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
                        <block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/>
                    </block>
                    <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
                        <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                               name="category.product.addto.compare" as="compare"
                               template="Magento_Catalog::product/list/addto/compare.phtml"/>
                    </block>
                    <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
                        <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
                    </block>
                    <action method="setToolbarBlockName">
                        <argument name="name" xsi:type="string">product_list_toolbar</argument>
                    </action>
                </block>
            </block>
            <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
                <arguments>
                    <argument name="triggers" xsi:type="array">
                        <item name="compareProductLink" xsi:type="string">.action.tocompare</item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
        <referenceBlock name="page.main.title">
            <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 class="Magento\Catalog\Block\Category\Rss\Link" name="rss.link" template="Magento_Catalog::category/rss.phtml"/>
        </referenceBlock>
    </body>
</page>
2
  • I know one site that uses Porto and the category name is included in a banner image, with the h1 tag enclosed in a hidden div. Browsing some of the Porto demo variations, this seems normal for their designs. I checked a handful, and none displayed the category title. So the question is whether it is needed by the design of the site you are working on, and for what purposes? (And is it there, but hidden?) If it is omitted/hidden by the theme, then figuring out how is key to overriding this behavior.
    – jiheison
    Jun 6, 2021 at 20:56
  • I was wondering if it was hidden as well, just would not know where to start. I asked Porto support about getting this added and was told it was something I needed to do myself. I have thought of actually using the banner option with a H1 Title, however this is something I've never done before and need to figure how to do. In the meantime I really would like to have the title's displayed. First Magento site/theme I have seen this on.
    – Troy B.
    Jun 7, 2021 at 12:49

1 Answer 1

0

I dont have enough reputation to reply in comment.
For any future reference, in Porto Theme the category page titles are hidden with css. Use your browser inspector to look for the class page-title-wrapper, this is probably set in css as: display:none.

To solve put this in your css:
.catalog-category-view .page-title-wrapper {display: block; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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