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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?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.
35 Comments
Hii Sanjay , Can u pls Provide Image ScreenShot along with blog for better understanding.
Hello Lokesh,
Thanks for your recommendation.
We will try to add the screenshots as well.
Thank You
Hi sanjay, can please tell me in list.phtml where should i put the code. top or in bottom.
Hello Shriyanshi,
Where to add code is depend on your requirement to display sub categories.
Thank You
hii in this code how can i add carsoual slider option.
thanks
Hello Sanjay Kumar,
The UL, LI tags are already used, so you’ll have to develop the slider code accordingly.
Thank you.
Not getting any output show nothing!!
Hey Himanshu,
It works perfectly for me.
Why don’t you try to enable the template path hints and check if the file that you have placed the code is called or not?
Thank you.
I’ve started to learn magento 2 last month do you please help me to find out learning criteria i’m confused so much
Hey, you can refer the Magento devdocs, our blog, and video tutorials for learning.
All the best.
Yes the file is same and I have also confirmed from your suggestion from template path hints.
Just need to know where do i have to put the code if its working fine
thanks 🙂
Hello Himanshu,
You can place the code at the start of this file.
Thanks.
code works fine thank you so much for the help
code works fine my friend but image could not be displayed
Images have been displayed there was in image upload in my code thank you so much Mr.sanjay
Welcome 🙂
hello code is work but product is not show in category and sub category.
Hello Gopal,
It seems as if you have replaced the code.
Actually you had to add the code in the file and not replace it.
Please try again and feel free to reach out again if you have further doubts.
Thank you.
My themes ‘search results’ page uses this file as well, which produces the following error:
Fatal error: Uncaught Error: Call to a member function getChildrenCategories() on null
Hoping you can recommend an easy fix .
Hello Michael,
I’ve updated the code. Please check again.
Thank you.
That worked perfect! Thanks so much.
Hey Michael, Thank you for this appreciation!
I wants to get sorted children categories by name, may be after this line of code $subcats = $category->getChildrenCategories();
can you please help me on this.
Thanks in advance.
Hello Kamlesh,
Replace:
if ($subcat->getIsActive())With:
if ($subcat->getIsActive() && $subcat->getName()=='specify name here')https://drops.meetanshi.com/ZeCOVe
Not working
I have tested the solution and it works fine. However, I can help you if you mention the error in detail.
How would I do this for an Argento custom theme that I set up in:
app/design/frontend/Local/argento-essence-custom
It’s parent is the argento-essence theme which is build on the argento-blank theme (I believe)
I tried copying list.phtml from here:
vendor/swissup/theme-frontend-argento-blank/Magento_Catalog/templates/product/list.phtml
to here:
app/design/frontend/Local/argento-essence-custom/Magento_Catalog/templates/product/list.phtml
Then I added the code to the bottom of list.phtml that I copied into the custom theme folder.
Result: Nothing… Does not work. Please advise.
Enable Template Path Hints and check if the file is getting executed or not. It will not work if the file is not getting executed.
Great thanks lot …
Never use objectManager in your template, you need to dependency inject the instance to your block and then call that from your template.
Yes, you can do this by calling the block you have created.
Can you update this to show how to properly implement this without the use of objectManager?
Hello,
If you want to implement the solution without using the object manager, you have to override the list.phtml file and create your block to create functions in it. I have added the code in default’s list file.
Thank you.
Trying to implement this, currently my site is based on the base luma theme, so I don’t actually have anything under the design folder in which to put this… any easy way to implement this as an addon to the default theme?
Here’s the path:
vendor\magento\module-catalog\view\frontend\templates\product\list.phtml