Opencart 3 - display images of the sub-categories in the category page

In this Opencart tutorial, we show you how to display sub-categories image on the category page in Opencart 3 by making code changes, click for Opencart 2 show images for sub-categories.

Open catalog/controller/product/category.php and find the following code:

$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)
);

Then replace with the following code:

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

Open catalog/view/theme/default/template/product/category.twig and find the following code:

{% if categories|length <= 5 %}
    <div class="row">
        <div class="col-sm-3">
            <ul>
                {% for category in categories %}
                    <li>
                        <a href="{{ category.href }}">
                            {{ category.name }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% else %}
    <div class="row">
        {% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
            <div class="col-sm-3">
                <ul>
                    {% for child in category %}
                        <li>
                            <a href="{{ child.href }}">
                                {{ child.name }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    </div>
    <br/>
{% endif %}

Replace with the following code:

 {% if categories|length <= 5 %}
    <div class="row">
        <div class="col-sm-3">
            <ul>
                {% for category in categories %}
                    <li>
                        {% if category.image  %}
                            <div>
                                <img src="{{ category.image }}" alt="{{ category.name }}" title="{{ category.name }}" class="img-thumbnail"/>
                            </div>
                        {% endif %}

                        <a href="{{ category.href }}">
                            {{ category.name }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% else %}
    <div class="row">
        {% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
            <div class="col-sm-3">
                <ul>
                    {% for child in category %}
                        <li>
                            <div>
                                {% if child.image  %}
                                    <img src="{{ child.image }}" alt="{{ child.name }}" title="{{ child.name }}" class="img-thumbnail"/>
                                {% endif %}
                            </div>

                            <a href="{{ child.href }}">
                                {{ child.name }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    </div>
    <br/>
{% endif %}

In catalog/view/theme/default/template/product/category.twig there are two places where we added the following code:

 {% if category.image  %}
    <div>
        <img src="{{ category.image }}" alt="{{ category.name }}" title="{{ category.name }}" class="img- 
        thumbnail"/>
    </div>
{% endif %} 

{% if child.image  %}
    <div>
        <img src="{{ child.image }}" alt="{{ child.name }}" title="{{ child.name }}" class="img-thumbnail"/>
    </div>
{% endif %}

Once we added the above code then we can see the images of the sub-categories.

This way we can show the sub-categories image on the category page. Let us know if need any support. Hope you liked this post, please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Twitter and Facebook.