By default opencart the subcategories list in category page will be displayed as a text list without images. Now I'm gonna show you a few steps how to add thumbnail images above the category title.

This tutorial applied to the default opencart theme and opencart version used is version 2.0.3.1

Here is the steps:

1. open file "catalog/controller/product/category.php" and find this code:

$data['categories'][] = array(

add this before the code above:

if($result['image']) {
$image = $this->model_tool_image->resize($result['image'], 200, 200);
 } else {
$image = $this->model_tool_image->resize('no_image.png', 200, 200);
 }

in code above the category image size is 200x200 ( w x h ), but you can also change it according to your needs.

then find this code :

'name'  => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),

then add this after the code above:

'image' => $image,

2. open file "catalog/view/theme/default/template/product/category.tpl" and find this code:

<div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>

replace the code above with this:

<?php foreach ($categories as $category) { ?>
            <div class="col-sm-3">
            <div class="category-thumb">
            <div class="image"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['image']; ?>" title="<?php echo $category['name']; ?>" class="img-responsive" /></a></div>
            <h4><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></h4>
            </div>
            </div>
<?php } ?>

3. On step 2 above the new class added for the category thumb, so now the last steps, it will add the css style code to the css file.
open file "catalog/view/theme/default/stylesheet/stylesheet.css" then add code below to the bottom of css file:

.category-thumb {
	margin-bottom: 20px;
	overflow: auto;
	text-align:center;
}
.category-thumb .image {
	padding:3px;
	border:1px solid #DDD;
}
.category-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}

That it's!

You can also download the files here:

Download Files

Posted by Mogi