In one of my project we had a two level category hierarchy. Clicking on the top level category displayed a promotional banner and the sub-categories. The second level category page displayed the products. In this post we will discuss how we can display the subcategories on a category page. We are not going to create any new module.

STEP 1: Create a PHTML file

First we create a phtml file {{MAGENTO_ROOT}}\app\design\frontend\rwd\mytheme\template\catalog\category\subcategories.phtml

Add the following code in this file:

<?php if (!Mage::registry('current_category')) return; ?>
<?php
$_category = Mage::getSingleton('catalog/layer')->getCurrentCategory();

$_categories = $_category->getCollection()
                        ->addAttributeToSelect(array('name', 'thumbnail'))
                        ->addAttributeToFilter('is_active', 1)
                        ->addIdFilter($_category->getChildren());
?>
<?php $_count = is_array($_categories)?count($_categories):$_categories->count(); ?>
<?php if($_count): ?>
    <section class="category-blocks">
        <ul>
            <?php foreach ($_categories as $_category): ?>
                <?php if($_category->getIsActive()): ?>
                    <li>
                        <a href="<?php echo $_category->getUrl() ?>">
                            <img src="<?php echo Mage::getBaseUrl('media').'catalog/category/'. $_category->getThumbnail() ?>" alt="<?php echo $this->escapeHtml($_category->getName()) ?>" />
                        </a>
                        <a>
                            <span><?php echo $this->escapeHtml($_category->getName()) ?></span>
                        </a>
                    </li>
                <?php endif; ?>
            <?php endforeach ?>
        </ul>
    </section>
<?php endif; ?>

If instead of displaying the category “thumbnail”, you want to display the category “image” then replace the line

->addAttributeToSelect(array('name', 'thumbnail'))

with

->addAttributeToSelect(array('name', 'image'))

The image src URL will be replaced by:

$_category->getImageUrl();

STEP 2: Create CMS Static Block

Navigate to Admin >> CMS >> Static Blocks and create a Static Block with the following content:

{{block type="core/template" name="sub-category-list" template="catalog/category/subcategories.phtml"}}

STEP 3: Assign the Static Block to the parent category

Navigate to Admin >> Catalog >> Categories >> Manage Categories, click on the parent category to edit it.

Click on the “Display Settings” tab to open it. Select the “Display Mode” as “Static block only” and then from the “CMS Block” dropdown select the static block you created in Step 2.

Alternate Method

If you do not want to use the CMS Static Block to display subcategories then you may follow the below alternate method.

Step 1. Create a PHTML file

The content of this file is the same as mention in the first approach above

Step 2:  Apply Custom Design to category

Navigate to Admin >> Catalog >> Categories >> Manage Categories, click on the parent category to edit it.

Click on the “Custom Design” tab to open it. Now select the page layout as “1 column” and in the “Custom Layout Update” textbox enter the following contents:

<reference name="category.products">
     <action method="setDisplaySubcategories">
         <value>1</value>
         </action>
     <block type="core/template" name="sub-category-list" after="-" template="catalog/category/subcategories.phtml" />
</reference>

Do this for each parent category on which you want to display the sub-categories.

Step 3:  Overrride the catalog/category/view.phtml file

Copy the file “view.phtml” in your theme template directory from the base theme and add the following lines at the end of file

<?php
if ( $this->getDisplaySubcategories() == 1) :
     echo $this->getChildHtml('sub-category-list');
endif;
?>

Finally clear the Magento Cache and refresh your category page, you are done!