Show images for the sub-categories in the opencart version 2.3

This Opencart tip is to show images for the sub-categories in the Opencart version 2.3, Vqmod is coming soon but you can make changes as per the following instructions.

Find following code at catalog\controller\product\category.php

$data['categories'][] = array(
	'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
	'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
);

Replace the code with below code:

$data['categories'][] = array(
	'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
	'image' => $this->model_tool_image->resize($result['image'], 100,100),
	'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
);

Changed is ‘image’ => $this->model_tool_image->resize($result[‘image’], 100,100), if you have to increase the size then change 100 to other values.

Find following code at catalog\view\theme\default\template\product\category.tpl

<?php if ($categories) { ?>
<h3><?php echo $text_refine; ?></h3>
<?php if (count($categories) <= 5) { ?>
<div class="row">
  <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>
</div>
<?php } else { ?>
<div class="row">
  <?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
  <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>
  <?php } ?>
</div>
<?php } ?>
<?php } ?>

Replace with the below code

<?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <?php if (count($categories) <= 5) { ?>
      <div class="row">
        <div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li> <a href="<?php echo $category['href']; ?>">
                <?php if($category['image']){ ?>
                <img src="<?php echo $category['image']; ?>" ><br>
                <?php } ?>
                <?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
      </div>
      <?php } else { ?>
      <div class="row">
        <?php  foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
        <div class="col-sm-3">
          <ul>
            <?php  foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>">
                <?php if($category['image']){ ?>
                <img src="<?php echo $category['image']; ?>" ><br>
                <?php } ?>
                <?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
        <?php } ?>
      </div>
      <?php } ?>
<?php } ?>

Extra code added is below and there are two places to add the code:

<?php if($category['image']){ ?>
      <img src="<?php echo $category['image']; ?>" ><br>
<?php } ?>

You are set for the default theme, but if you are using custom theme then you have to manage as per your theme.

Previous articlewhat is the best salesforce tool to prevent overbooking?
Next articleDisplay all products opencart module for free version 2.3, 2.2, 2.1, 2.0

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here