Display category image under link text in opencart

Question

I've used OpenCart v2.2.0.0 for a client's website as it was their eCommerce system of choice. We have gotten a lot of the preliminary design added onto the website - that's not a problem.

The issue we are having is with the category pages.

Currently, the subcategories are displaying as normal text links: http://i.imgur.com/1LORcrg.jpg

What we would like to accomplish is to feed through unique images underneath these links.

What I had in mind was whether it was possible to feed the category image below the text, so that it looks similar to this: http://i.imgur.com/zTv2hHN.jpg

Is this possible within this version of OpenCart?

Any help would be much appreciated.

Cheers, Euan

Answer 1

Step 1: Go to catalog\\view\\theme\\THEMEACTIVE\\template\\product\\category.tpl Find following line of code (in default theme there are in two places)

<?php foreach ($categories as $category) { ?><li>

Then add following lines of code (if in default then add on both places)

<a href="<?php echo $category['href']; ?>">
            <img src="<?php echo $category['category_image']; ?>" />
          </a>

Step 2: Go to catalog\\controller\\product\\category.php Find following lines of code:

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

Add following lines of code just below it:

'category_image' =>$this->model_tool_image->resize($result['image'], 200,200),

Here 200 is the size of image, first is width and second is height. Save and it will show images

Better to make OCMOD for it. Instead of directly writing code in core file.