Magento 2: Add Extra Category Description on Product Listing Page

Hello Magento Friends,

In today’s blog, we will learn about adding an additional description of the category on the Magento 2 product listing page.

The Product Listing Page is used to display a set of products in a list or grid form. Check out How to Configure Product Listings in Magento 2.

Sometimes you want to show information about the category on the product listing page for SEO purposes or for a better understanding of categories.

To add extra category description on the product listing page in Magento 2, follow the below steps.

Steps  Add Extra Category Description on Product Listing Page in Magento 2:

Step 1: First we need to create the DescriptionAttribute.php file inside the Setup folder

app\code\Vendor\Extension\Setup\Patch\Data

Now add the code as follows

<?php
namespace Vendor\Extension\Setup\Patch\Data;
 
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\Patch\DataPatchInterface;
use Magento\Framework\Setup\Patch\PatchRevertableInterface;
use Magento\Store\Model\Store;
 
class DescriptionAttribute implements DataPatchInterface
{
    private $eavSetupFactory;
 
    /**
     * Constructor
     *
     * @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory, ModuleDataSetupInterface $moduleDataSetup)
    {
       $this->eavSetupFactory = $eavSetupFactory;
       $this->setup = $moduleDataSetup;
    }
 
    /**
     * {@inheritdoc}
     */
    public function apply()
    {  
         $eavSetup = $this->eavSetupFactory->create(['setup' => $this->setup]);

           $eavSetup->addAttribute(
               \Magento\Catalog\Model\Category::ENTITY,
                'extra_description',
            [
                'type' => 'text',
                'label' => 'Extra Description',
                'input' => 'textarea',
                'required' => false,
                'sort_order' => 8,
                'global' => ScopedAttributeInterface::SCOPE_STORE,
                'wysiwyg_enabled' => true,
                'is_html_allowed_on_front' => true,
                'group' => 'General Information',
            ]
        );
    }
    public static function getDependencies()
    {
        return [];
    }

    /**
     * {@inheritdoc}
     */
    public function getAliases()
    {
        return [];
    }

    /**
     * {@inheritdoc}
     */
    public static function getVersion()
    {
        return '1.0.0';
    }
}

Step 2: In the next step, we need to create category_form.xml file inside the view folder

app\code\Vendor\Extension\view\adminhtml\ui_component  

And add the below code snippet

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="content">
        <field name="extra_description" template="ui/form/field" sortOrder="50" formElement="wysiwyg">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="wysiwygConfigData" xsi:type="array">
                        <item name="height" xsi:type="string">100px</item>
                        <item name="add_variables" xsi:type="boolean">false</item>
                        <item name="add_widgets" xsi:type="boolean">false</item>
                        <item name="add_images" xsi:type="boolean">true</item>
                        <item name="add_directives" xsi:type="boolean">true</item>
                    </item>
                    <item name="source" xsi:type="string">category</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Extra Description</label>
                <dataScope>extra_description</dataScope>
            </settings>
            <formElements>
                <wysiwyg class="Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg">
                    <settings>
                        <rows>8</rows>
                        <wysiwyg>true</wysiwyg>
                    </settings>
                </wysiwyg>
            </formElements>
        </field>
    </fieldset>
</form>

Step 3: After that we need to create extra_description.phtml file at the below path

app\code\Vendor\Extension\view\frontend\templates\product\list  

Then add the below-mentioned code

<?php if ($_bottomDescription = $block->getCurrentCategory()->getExtraDescription()): ?>
    <div class="category-extra-description">
        <?= /* @escapeNotVerified */ $this->helper('Magento\Catalog\Helper\Output')->categoryAttribute($block->getCurrentCategory(), $_bottomDescription, 'extra_description') ?>
    </div>
<?php endif; ?>

Step 4: In the last step, we need to create catalog_category_view.xml at the following path

app\code\Vendor\Extension\view\frontend\layout

Now add the code as follows

<?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="content">
            <block class="Magento\Catalog\Block\Category\View" name="extra.description" template="Vendor_Extension::product/list/extra_description.phtml" after="-"/>
        </referenceContainer>
    </body>
</page>

Conclusion:

Now you can easily add more information about the category on the product listing page in Magento 2. If you face any issues while implementing the above steps, freely contact me via the comment section. Also, check out Magento Development services to fulfill your other requirements.

Share the article with your friends and stay in the loop with us for more Magento 2 tutorials.

Happy Coding!