How to Display Magento 2 Subcategories With Image on Category page

 

Do you own a Magento 2 store with the wide variety of products and services? Do you have multiple subcategories under a category and do you want to provide easy navigation from the category in the store to improve the user experience?

It is not at all accepted that you lose a conversion just because a potential customer was unable to find what he wanted at your store Here’s the solution to display Magento 2 subcategories with image on category page that helps visitors to navigate easily through your store!

Provide a rich navigation system in Magento 2 store. Display Magento 2 subcategories with image on category page. It allows visitors to quickly navigate through the store and the images add to the visual display for easy navigation.

Follow the solution and you’ll have a Magento 2 store with enhanced user experience
Method to Display Magento 2 Subcategories With Image on Category page:

Add the below code at app/design/[Theme Folder]/Magento_Catalog/templates/product/list.phtml

<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');//get current category if ($category) {     $subcats = $category->getChildrenCategories();     $_helper = $this->helper('Magento\Catalog\Helper\Output');     ?>     <ul style="padding: 0px;float: left;width: 100%">         <?php         foreach ($subcats as $subcat) {             if ($subcat->getIsActive()) {                 $_category = $objectManager->create('Magento\Catalog\Model\Category')->load($subcat->getId());                 $_outputhelper = $this->helper('Magento\Catalog\Helper\Output');                 $subcaturl = $subcat->getUrl();                   $_imgHtml = '';                 if ($_imgUrl = $_category->getImageUrl()) {                       $_imgHtml = '<img style="width: 100%;" src="' . $_imgUrl . '" />';                     $_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');                       /* @escapeNotVerified */                     echo '<li style="list-style-type: none;width:24%;margin-right:1%;float:left"><a href="' . $subcaturl . '                 " class="block-promo" title="' . $subcat->getName() . '">' . $_imgHtml . '                 </a></li>';                 }             }         } ?>     </ul> <?php } ?>

There you go! A Magento 2 store with a wide variety of products, all easily sorted and accessible for your valuable customers!

Please feel free to seek help in the implementation of the above solution ?
Don’t forget to rate the post with 5 stars.

Thank You.