Show attributes of products in category page Opencart 2.0+ and 3.0+

This opencart tutorial shows how to show attributes of products in category page in Opencart 2.0 and Opencart 3.0.3.2 we will provide OCMOD and VqModafter some time:

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

$data['products'][] = array(
	'product_id'  => $result['product_id'],
	'thumb'       => $image,
	'name'        => $result['name'],
	'description' => utf8_substr(trim(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8'))), 0, $this->config->get('theme_' . $this->config->get('config_theme') . '_product_description_length')) . '..',
	'price'       => $price,
	'special'     => $special,
	'tax'         => $tax,
	'minimum'     => $result['minimum'] > 0 ? $result['minimum'] : 1,
	'rating'      => $result['rating'],
	'href'        => $this->url->link('product/product', 'path=' . $this->request->get['path'] . '&product_id=' . $result['product_id'] . $url)
);

Now add one line in it ‘attribute_groups’ => $this->model_catalog_product->getProductAttributes($result[‘product_id’]), then the products array will be like below:

$data['products'][] = array(
	'product_id'  => $result['product_id'],
	'thumb'       => $image,
	'attribute_groups'       => $this->model_catalog_product->getProductAttributes($result['product_id']),
	'name'        => $result['name'],
	'description' => utf8_substr(trim(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8'))), 0, $this->config->get('theme_' . $this->config->get('config_theme') . '_product_description_length')) . '..',
	'price'       => $price,
	'special'     => $special,
	'tax'         => $tax,
	'minimum'     => $result['minimum'] > 0 ? $result['minimum'] : 1,
	'rating'      => $result['rating'],
	'href'        => $this->url->link('product/product', 'path=' . $this->request->get['path'] . '&product_id=' . $result['product_id'] . $url)
);

For OpenCart 3.0+

Now open catalog/view/theme/YOUR_THEME_FOLDER/template/product/category.twig and add following codes just below <p>{{ product.description }}</p>

{% if product.attribute_groups %}
<div class="tab-pane" id="tab-specification">
  <table class="table table-bordered">
    {% for attribute_group in product.attribute_groups %}
    <thead>
      <tr>
        <td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
      </tr>
    </thead>
    <tbody>
    {% for attribute in attribute_group.attribute %}
    <tr>
      <td>{{ attribute.name }}</td>
      <td>{{ attribute.text }}</td>
    </tr>
    {% endfor %}
      </tbody>
    {% endfor %}
  </table>
</div>
{% endif %}

For OpenCart 2.0+

Now open catalog/view/theme/YOUR_THEME_FOLDER/template/product/category.tpl and add following codes just below <p><?php echo $product[‘description’]; ?></p>

<p>
  <?php if ($product['attribute_groups']) { ?>
<div class="tab-pane" id="tab-specification">
  <table class="table table-bordered">
    <?php foreach ($product['attribute_groups'] as $attribute_group) { ?>
    <thead>
    <tr>
      <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>
    </tr>
    </thead>
    <tbody>
    <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
    <tr>
      <td><?php echo $attribute['name']; ?></td>
      <td><?php echo $attribute['text']; ?></td>
    </tr>
    <?php } ?>
    </tbody>
    <?php } ?>
  </table>
</div>
<?php } ?>
</p>

Save and reload and it will show attributes in category’s products