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

        

            

                {% for category in categories %}
                    

                        
                            {{ category.name }}
                        
                    
                {% endfor %}
            
        
    
{% else %}
    

        {% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
            

                

                    {% for child in category %}
                        

                            
                                {{ child.name }}
                            
                        
                    {% endfor %}
                
            
        {% endfor %}
    
    

{% endif %}

Replace with the following code:

 {% if categories|length <= 5 %}
    

        

            

                {% for category in categories %}
                    

                        {% if category.image  %}
                            

                                
                            
                        {% endif %}

                        
                            {{ category.name }}
                        
                    
                {% endfor %}
            
        
    
{% else %}
    

        {% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
            

                

                    {% for child in category %}
                        

                            

                                {% if child.image  %}
                                    
                                {% endif %}
                            

                            
                                {{ child.name }}
                            
                        
                    {% endfor %}
                
            
        {% endfor %}
    
    

{% endif %}

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

 {% if category.image  %}
    

        
    
{% endif %} 

{% if child.image  %}
    

        
    
{% 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.