Открываем файл /catalog/controller/product/category.php

Здесь находим:

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

Перед этой строкой добавим код для получения изображения, с проверкой. Если изображения для категории нет, используем заглушку - стандартный no_image.png в изображениях опенкарта.

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

После найденной строки добавляем изображение, а так же разбиваем 'name' на 2 части - имя категории и счетчик товаров. Должно в итоге получиться так:

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

Теперь перейдем к шаблону.

Изменения в шаблоне

Открываем файл /catalog/view/theme/default/template/product/category.tpl и находим следующий код (29-54 строки в шаблоне по умолчанию, в других шаблонах могут быть отличия):

<?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 } ?>

Здесь идет проверка количества категорий и в зависимости от результата разбивка на столбцы, данную проверку убираем, выводим изображение и счетчик товаров. Учитывая, что в контроллере есть проверка на включение отображения количества товаров в настройках, сделаем так же проверку и в шаблоне. Должно получиться так:

<?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <div class="row">
        <div class="subcats">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li class="col-sm-3">
            <a href="/<?php echo $category['href']; ?>">
            <img src="/<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>" />
            <?php echo $category['name']; ?>
            </a>
            <?php if ($category['count']) { echo '<span class="count">'. $category['count'].'</span>';} ?>
            </li>
            <?php } ?>
          </ul>
        </div>
      </div> 
      <?php } ?>

Добавляем в CSS

.subcats ul {padding: 0px;list-style-type:none;}
.subcats li {margin-bottom: 20px;text-align: center;}
.subcats li img {display: block;border-radius: 50px;margin: 0px auto 10px auto;border: 1px solid #ECECEC;}
.subcats .count {position: absolute;top: 0px;left: 50%;background: #FF6A00;color: #fff;text-align: center;line-height: 30px;width: 30px;border-radius: 15px;margin-left: 32px;border: 1px solid #ECECEC;}