How to show sub category image with sub category name on list page in Magento 2?

If you want to show sub category image with sub category name of current category page then follow below process.

Get subcategory of current category

Step 1 : create sub-category.phtml file under ../app/design/frontend/[VendorName]/[theme]/Magento_Catalog/templates/category/

and paste below code inside it

<?php
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');    //get current category
    $subcategories = $category->getChildrenCategories();
    $_helper = $this->helper('Magento\Catalog\Helper\Output');
?>

<ul class="sub-category">
    <?php
    foreach ($subcategories as $sub_category) {
            $_category = $objectManager->create('Magento\Catalog\Model\Category')->load($sub_category->getId());
            $_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
            $subcategoryurl = $sub_category->getUrl();            
            $catimgHtml = '';
            echo '<li>';
            if ($catimgUrl = $_category->getImageUrl()) {
                $catimgHtml = '<img src="' . $catimgUrl . '" />';
                $catimgHtml = $_outputhelper->categoryAttribute($_category, $catimgHtml, 'image');
                /* @escapeNotVerified */
                echo '<a href="' . $subcategoryurl . '" title="' . $sub_category->getName() . '">' . $catimgHtml . '</a>';
            }
            echo '<h2><a href="' . $subcategoryurl . '" title="' . $sub_category->getName() . '">' . $sub_category->getName() . '</a></h2>';
            echo '</li>';
    } ?>
</ul>

<?php

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category'); //get current category

$subcategories = $category->getChildrenCategories();

$_helper = $this->helper('Magento\Catalog\Helper\Output');

<?php

foreach ($subcategories as $sub_category) {

$_category = $objectManager->create('Magento\Catalog\Model\Category')->load($sub_category->getId());

$_outputhelper = $this->helper('Magento\Catalog\Helper\Output');

$subcategoryurl = $sub_category->getUrl();

$catimgHtml = '';

echo '<li>';

if ($catimgUrl = $_category->getImageUrl()) {

$catimgHtml = '<img src="' . $catimgUrl . '" />';

$catimgHtml = $_outputhelper->categoryAttribute($_category, $catimgHtml, 'image');

/* @escapeNotVerified */

echo '<a href="' . $subcategoryurl . '" title="' . $sub_category->getName() . '">' . $catimgHtml . '</a>';

}

echo '<h2><a href="' . $subcategoryurl . '" title="' . $sub_category->getName() . '">' . $sub_category->getName() . '</a></h2>';

echo '</li>';

} ?>

</ul>

Step 2 : Add below mention code in ../app/design/frontend/[VendorName]/[theme]/Magento_Catalog/layout/catalog_category_view.xml

<referenceContainer name="columns.top">
    <!-- Add this below code -->
    <container name="category.view.customcatlink" htmlTag="div" htmlClass="custom-category-link" before="category.view.container">
        <block class="Magento\Catalog\Block\Category\View" name="custom.category.links" template="Magento_Catalog::category/custom-cat-links.phtml"/>
    </container>

</container>

After that run below commands

– php bin/magento setup:upgrade
– php bin/magento setup:di:compile
– php bin/magento cache:clean

That’s it.

Now, sub category image with sub category name will show on list page.

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-6387c18b4a5a9608644256/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire R. Patel

Let’s have a call

Fill the form & Get Installation Support