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: