Hi,
You can achieve this by adding a small code snippet to your view override of product / listing_img_title.php via the menu Display>Views and a custom product field where you can provide the initial stock of the product.
Assuming your custom field calls its column initial_stock, you can insert the following code where you want the bar to appear (for example, just after the product image div/span):
<?php
// CUSTOM PROGRESS BAR
if(!empty($this->row->initial_stock) && (int)$this->row->initial_stock > 0) {
$initial = (int)$this->row->initial_stock;
$current = (int)$this->row->product_quantity;
// Calculate percentage remaining.
// To show "percentage sold" instead, use: $percent = 100 - (($current / $initial) * 100);
$percent = ($current / $initial) * 100;
$percent = max(0, min(100, $percent)); // Keep between 0-100
?>
<div class="hikashop_stock_progress" style="margin: 5px 0;">
<!-- The Bar Container -->
<div style="background-color: #f3f3f3; height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid #ddd;">
<div style="background-color: #28a745; height: 100%; width: <?php echo $percent; ?>%;"></div>
</div>
<!-- The Text Info -->
<div style="text-align: center; font-size: 11px; margin-top: 2px; color: #555;">
<?php echo $current; ?> / <?php echo $initial; ?> items left
</div>
</div>
<?php
}
?>