Changing the Out Of Stock status color style in OpenCart 1.5.4.

Out of stock status style

Same as the default setting for In Stock status, the Out Of Stock status text is boring as well. Pure grey words, sometimes not noticeable at all. I suppose you would like to add some new color styling to that status as well, so here’s what needs to be done for Changing the Out Of Stock status color style in OpenCart version 1.5.4.

Since the Out Of Stock status is changeable according to the product count in the database and gets dynamically created on the final page that the visitor sees, changing it is different from just modifying the language file like I described in Changing the Stock status color style post. First of all you need to define the default stock status by visiting: Admin panelSystemLocalisationStock Statuses. There you should edit the Out Of Stock (Default) status and enter the appropriate translation for your language. In this example the text I used is Serbian word “RASPRODATO“.

localisation-stock-status

The next thing to do is altering the file product.tpl, like the following example:

1. Open the file product.tpl located in catalog/view/theme/your_active_theme/template/product

2. Find the following piece of code (it should be around line 38 in OC version 1.5.4. and around line 145 in OC version 2.0):

<span><?php echo $text_stock; ?></span> <?php echo $stock; ?>

3. Edit like this:


<?php echo $text_stock; ?>
<!-- <?php echo $stock; ?> -->
<?php if ($stock == "RASPRODATO"){echo '<span style="color:white;background:red;">'.$stock.'</span>';}else{echo $stock;} ?>

Please note that “RASPRODATO” is the default Out Of Stock name that I set on the beginning of this post. You can translate this term according to your language. And that’s how the changing the Out Of Stock status color style in OpenCart is done. Also, the code above is example for OC version 1.5.4. store, so bear in mind that newer versions may have different tags and code parts. Be careful with inserting custom code parts into your store core files. Backup first!!!

stock-status-red

By janoshke

Web developer and IT consultant. Freelancer with full respect for OpenCart and WordPress. Gamer, (ex)drummer and parent.

4 comments

  1. Hello, dear Janoshke!

    Could you please help me to make the same background at the product status as on your screenshot (red one)?

    Thank you and hello from Mnisk, Republic of Belarus
    Siarhei

  2. Hello, if I have a website in 2 languages, how do I make it work for both?

    It is only functional for one language.

    1. Hi Radu,
      You can also style the language strings in the language file as well. Just find the translation for the string

      $text_stock

      and copy the entire span in its translation text. I hope this helps.

Leave a Reply