We use cookies to improve our services and provide a better experience. By continuing to use this site, you agree with our Cookies Policy.

Tutorials
More than 400 step-by-step articles to guide you through online project development.
HomeTutorialsCMS TutorialsMagentoMagento Administration

How to Show Sub Categories with Images and Links Instead of Products

Brazil VPS
Windows Cloud Server
cPanel KVM
Germany Cloud Servers
OpenVZ VPS
Linux KVM Hosting
KVM VPS
Linux Cloud Server
Ubuntu VPS
USA VPS

At some point, you may want to customize the look of your store. For example, instead of displaying the products in a regular way, you want them to be displayed in sub-categories with images and links. In such case, if someone would click on the sub-category link, they would get the products from that sub-category. To customize your store in such a way, you will need to add some scripts to your Magento website.

Follow These Steps to Customize Magento Product View

First, create a file “sub_category_list.phtml” in the “/app/design/frontend/defalult/theme_name/template/catalog/category/” directory and place the following code in it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <?php
$_category          = $this->getCurrentCategory();
$_category_children    = $_category->getChildren();
$catIds                 = explode(',',$_category_children);$categories = array();foreach($catIds as $catId) {
$category = Mage::getModel('catalog/category')->load($catId);
$categories[$category->getName()] = array(
'url' => $category->getUrl(),
'img' => $category->getImageUrl()
);
}
?>
<?php if($category->getIsActive()): ?>
<?php foreach($categories as $name => $data): ?>
<p>
<a href="<?php echo $data['url']; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>">
<img src="<?php echo $data['img']; ?>" />
<div><?php echo $name; ?></div>
</a>
</p>
<?php endforeach; ?>
<?php endif; ?>

After saving the file, login to Magento admin panel and create a new static block. To do this, go to CMS -> Static Blocks and click “Add New Block”.

Add new block

Enter “Sub Category Listing” in the title field and “sub_category_listing” in the identifier field. You should also make sure to place the following code in the content field, or it might not work.

1
{{block type="catalog/navigation" name="catalog.navigation" template="catalog/category/sub_category_listing.phtml"}}

Apply the changes and add this new block by clicking on “Save Block” button in the right upper corner.

Finally, you will need to assign the newly created block to a category. For this reason, go to Catalog -> Manage Categories and select the category in which you want the sub-categories to be listed. Then click on the “Display Settings” tab.

Display settings

From the “Display Mode” list select “Static block only”. For “CMS Block” select “Sub Category Listing” and save the changes by clicking “Save Category”.

By doing this, you should have sub-categories displayed with images and links instead of products.

Linux Cloud Server
Windows Cloud Server
Linux KVM Hosting
Germany Cloud Servers
USA VPS
Ubuntu VPS
cPanel KVM
OpenVZ VPS
Brazil VPS
KVM VPS
Rate this Tutorial:
4 Comments Leave a Comment
  1. David

    I have a setup similar to this. Do you know how I can change the sort order. It in no random order. I need them to display in the same order the admin menu or my main frontpage category menu is displaying which is in the same order as the sub categories in the admin section. I have been trying to figure this out for 3 days so any help would be greatly appreciated.

    Reply
  2. ed

    Did you get this also active for magento 2.0?

    Reply
  3. Gilles

    Hi,
    I do not manage to make it work…
    Are you sure of the code path “/app/design/frontend/defalult/theme_name/template/catalog/category/”

    I tried to put it in
    “/app/design/frontend/mango/default/template/catalog/category/”
    and
    “/app/design/frontend/mango/reflector/template/catalog/category/”

    because in “/app/design/frontend/default/” there is no “theme_name”…

    Reply
    • Gilles

      found !
      It is in “/app/design/frontend/mango/reflector/template/catalog/category/”
      File name should be sub_category_listing.phtml
      And with magento 1.9.2, catalog/navigation should be in a block permission

      Reply
Leave a Comment