Magento Subcategories on Category Pages

By default Magento will only display a category’s direct subcategories in the form of a neat list in the left hand navigation. This is all well and good, but oftentimes something more visual is required which will encourage the user to click though.

If you’ve chosen not to list products in your parent category this basically leaves a large white space in your content area, which could be much better utilised as an area to display your subcategories! Here’s the method…

1. Create catalog/category/sub.phtml

First, create a new file in your theme, which will be used to display your current category’s subcategories. The code to do this is below:

<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$categories = $category->getCollection()
        ->addAttributeToSelect(array('name', 'thumbnail'))
        ->addAttributeToFilter('is_active', 1)
        ->addIdFilter($category->getChildren())
?>
<ul class="subcategories">
    <?php foreach ($categories as $category): ?>
        <li>
            <a href="<?php echo $category->getUrl() ?>"><img src="<?php echo Mage::getBaseUrl('media') . 'catalog' . DS . 'category' . DS . $category->getThumbnail() ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" />
                <span><?php echo $category->getName() ?></span></a>
        </li>
    <?php endforeach; ?>
</ul>

In the code above we’re simply loading the category children that belong to the current category, and display them with their names and thumbnails in an unordered list. You could alternatively add ‘image’ to the addAttributeToSelect() call, then use the following to bring out the category image, rather than the thumbnail:

$category->getImageUrl()

2. Create Static Block

Go to CMS > Static Blocks and create a new static block with the following information:

Name: Subcategories
Code: subcategories
Status: Enabled
Content:

{{block type="core/template" template="catalog/category/sub.phtml"}}

This simply assigns the template we’ve just created with a ‘core/template’ block type to this static block.

3. Assign Static Block to Parent Category

Find the parent category that you want to show subcategories on, then go to the ‘Display Settings’ tab. Switch ‘Display Mode’ to either ‘Static block only’ or ‘Static block and products’, then choose your newly create ‘Subcategories’ block from the ‘CMS Block’ menu. Then save.

Config Categories
Configure your category to show the static block

If you check your sites frontend you should now see the subcategories appearing:

Subcategories
Subcategories in all their beauty

I’ve added the CSS I used in my example below to get you started. Thanks for reading!

.subcategories li { float: left; display: block; text-align: center; margin: 10px}
.subcategories li span { display: block; margin: 8px 0}