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.

Sub-categories Images in category page

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.

Previous articleEasy steps to setup local environment of Pantheon with Lando
Next articleOpenCart 3 error Warning: You do not have permission to modify the default store theme!

3 COMMENTS

  1. Hi! Thanks for this code. I nearly works for me 😉 The only problem I have is that the image-url skips the /image/. So it starts immediately with example.com/catalog/path/image.png instead of /image/catalog/path/image.php. This way the image won’t show up. What can I try to fix this?

  2. Hi! Thanks for this code. I nearly works for me 😉 The only problem I have is that the image-url skips the /image/. So it starts immediately with example.com/catalog/path/image.png instead of /image/catalog/path/image.php. This way the image won’t show up. What can I try to fix this?

LEAVE A REPLY

Please enter your comment!
Please enter your name here