Magento v1.x.x.x

It’s a pretty common requirement to show a list of sub categories inside a parent category page, instead of products. Who knows why this wasn’t a standard function of Magento, but thankfully there’s a simple workaround.

Categories in your categories yo

Categories in your categories yo

So let’s begin at the top.

1. In Magento admin navigate to CMS > Static Blocks

magento_subcategories_on_gallery_pages_listing_1

2. Click “Add New Block” at the top right

3. Create the new static block with the following details:

Block Title: Sub Category Listing

Identifier: subcategory_listing

Status: Enabled

Content: {{block type="catalog/navigation" template="catalog/navigation/subcategory_listing.phtml"}}

magento_subcategories_on_gallery_pages_listing_2

4. Click Save Block in the top right

5. Navigate to the parent category under Catalog > Manage Categories and within the Display Settings Tab set to the following:

Display mode: Static Block only

CMS Block: Sub Category Listing

Is Anchor: No

6. Click Save Category in the top right

7. Create a new file called subcategory_listing.phtml in:

app/design/frontend/yourpackagename/yourthemename/template/catalog/navigation/

Containing the following code:

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
31
32
<?php
    $layer = Mage::getSingleton('catalog/layer');
    $_category   = $layer->getCurrentCategory();
    $_categories = $_category->getCollection()->addAttributeToSelect(array('url_key','name','image','all_children','is_anchor','description'))
    ->addAttributeToFilter('is_active', 1)
    ->addIdFilter($_category->getChildren())
    ->setOrder('position', 'ASC')
    ->joinUrlRewrite();
  ?>

<div class="listing-type-list catalog-listing">
    <ul id="subcats" class="clear">
        <?php foreach ($_categories as $_category): ?>
                <?php if($_category->getIsActive()): ?>
                    <?php Mage::log($_category->debug(), null, 'mylogfile.log'); ?>
                    <li>
                        <div class="subcat clearfix">
                            <a class="now-from-container" href="<?php echo $_category->getURL() ?>"></a>
                            <div class="subcat-image">
                                <a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
                                    <img src="<?php echo $this->htmlEscape($_category->getImageUrl()) ?>" width="190" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />
                                </a>
                            </div>
                            <div class="subcat-title-container">
                                <h2><a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) ?></a></h2>
                            </div>
                        </div>
                    </li>
                <?php endif; ?>
        <?php endforeach; ?>
    </ul>
</div>

So, all this does is grabs the current category being viewed (the parent category), cycles through the sub categories of the parent category. Checks each sub category to see if it is active, and if so outputs it to the sub category list.

8. Make sure your sub categories have an image assigned to them under Catalog > Manage Categories > Sub Category

And that’s how to display a sub category listing on a category page in Magento.

“Expert in all things Magento, Shopify and Ecommerce."

Get In Touch
Rowan Burges
Visit me on Linkedin linkedin