How to Add Thumb Image to Subcategory in Category Page

How to Add Thumb Image to Subcategory in Category Page

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

Mogi Posted by Mogi


Related Articles

How to Create Extra Position in Opencart 2.0
A while back ago I have customer who bought my template for opencart version 1.5.5.1 and want to have a module position above the column left or column right and the content. I know that it is not possible if using default opencart layout, so it will need to have extra layout position below the header. and the trick is I made a duplicate of content top position I give it name "content header" and put the position under the header. And now I will write some steps about how  to create the extra position with opencart version 2.0.3.1, so let’s begin! Catalog – Duplicate Controller file Now..
3 comments on this article - view comments

7 Comments To "How to Add Thumb Image to Subcategory in Category Page"

tim On 18.08.2016
Notice: Undefined variable: category in D:/wamp/www/catalog/view/theme/default/template/module/onlysubcategories.tpl on line 40 on this server. ? Reply to this comment
Justinas from Lithuania On 18.08.2016
Great post! This module is fully compatible with Open Cart 2.1.0.1. Thank you very much! Reply to this comment
tim On 18.08.2016
Notice: Undefined variable: category in D:/wamp/www/catalog/view/theme/default/template/module/onlysubcategories.tpl on line 40 on this server. ? Reply to this comment
Samuel Adekanye On 06.01.2016
Is this module compatible with Open Cart 2.1.0.1 Reply to this comment
mehmet On 18.08.2016
problem error ....catalog\controller\product\category.php on line 150 not vork oc2.1.0.2
Samuel On 06.01.2016
Is this module compatible with Open Cart 2.1.0.1 Reply to this comment
Mogi On 08.01.2016
yes I think it will compatible with 2.1.0.1
Showing 1 to 5 of 5 (1 Pages)

Write a comment

Your Name:
 
Your Comment:
Note: HTML is not translated!