In this blogpost we will take a closer look into the OpenCart stock statuses, show you how you can add more of them and how you can change their color in the desired way.

In general, the stock status shows your customers the current stock of each product in your online store. OpenCart uses the current quantity of a product to determine the stock status displayed in your store’s product page. If the quantity of a product is above 0, the availability of a product in the front store will be always set to In Stock. However, when the quantity is 0, OpenCart gives you the option to choose the Out-of-Stock status for the specific product from the admin panel. There are a couple of pre-set Out-Of-Stock statuses you can choose from: Out Of Stock, 2-3 Days, In-Stock, Pre-Order. In addition, if these doesn’t seem to be enough for you, you can add custom stock statuses effortlessly from the admin panel of your OpenCart store.

Adding custom stock statuses

In order to add a custom stock status go to your Admin Panel > Settings > Localisation > Stock Statuses and click on the blue button with the plus sign in the top-right corner. The only thing you’ll need to add is the name of the new stock status. If you have a multilingual setup, you will see different input fields for the different languages.

Click on the Save button and you will have your new stock status created. You can add it to a product once you go to Catalog > Products > Edit > Data > Out of Stock Status and choose it from the dropdown menu.

In the second part of this blogpost, we will show you how you can easily change the colors of your stock statuses in the front store. This will catch your customers’ attention and will give your store a more personalized and complete outlook. Unfortunately, OpenCart doesn’t provide you with this functionality out of the box, but we will show you how you can create an OCMOD file, which wouldn’t change any of your core files.

We will show you two ways in which you can modify the colors of your products Stock Statuses.  The first one is coloring the In Stock products’ status in one color and the Out-Of-Stock products’ statuses in another (see the image below). The second one would be coloring all of your Stock Statuses in different colors.

Two different colors for In Stock and Out-of-Stock Items

We will begin with adding only two colors depending on the quantity of your products. In our example, if the quantity is above 0, the Stock Status will be set to In Stock and will be colored in GREEN color. Otherwise, the Stock Status will be colored in RED, no matter the specific Out-Of-Stock status.

Let’s start by creating a blank document in your preferred text editor.Copy and paste the following code (the code is explained a bit later on):

<modification>

    <name>Stock Status Color by iSenseLabs</name>
    <version>1.0</version>
    <link>https://isenselabs.com</link>
    <author>iSenseLabs</author>
    <code>isenselabs_stock_status_color</code>
    
    <file path="catalog/controller/product/product.php">
        <operation>
            <search><![CDATA[if ($product_info['quantity'] <= 0) {]]></search>
            <add  position="before"><![CDATA[$data['quantity'] = $product_info['quantity'];]]></add>
        </operation>
    </file>

    <file path="catalog/view/theme/*/template/product/product.tpl">
        <operation>
            <search><![CDATA[<?php echo $stock; ?>]]></search>
            <add position="replace"><![CDATA[<span style="font-weight:bold;<?php echo ($quantity > 0) ? 'color:#66aa00' : 'color:#ff0000'; ?>"><?php echo $stock; ?></span>]]></add>
        </operation>
    </file>

    <file path="catalog/controller/product/category.php">
        <operation>
            <search><![CDATA[$this->load->language('product/category');]]></search>    
            <add position="after"><![CDATA[
                $this->load->language('product/product');
            ]]></add>
        </operation>
        <operation>
            <search><![CDATA[$data['products'][] = array(]]></search>    
            <add position="before"><![CDATA[
                if($result['quantity'] <= 0){
                    $result['stock'] = $result['stock_status'];
                }
                elseif($this->config->get('config_stock_display')){
                    $result['stock'] = $result['quantity'];
                }
                else{
                    $result['stock'] = $this->language->get('text_instock');
                }
            ]]></add>
        </operation>
        <operation>
            <search><![CDATA[$data['products'][] = array(]]></search>
            <add position="after"><![CDATA[
                'quantity' => $result['quantity'],
                'stock' => $result['stock'],
            ]]></add>
        </operation>
    </file>

​    <file path="catalog/view/theme/*/template/product/category.tpl">
        <operation>
            <search><![CDATA[<?php if ($product['rating']) { ?>]]></search>
            <add position="before"><![CDATA[
                <div class="stock-status">
                    <span style="font-weight:bold;<?php echo ($product['quantity'] > 0) ? 'color:#66aa00' : 'color:#ff0000'; ?>"><?php echo $product['stock']; ?></span>
                </div>
            ]]></add>
        </operation>
    </file>
</modification>

Note that you can change the colors by changing the hex color value in: 

'color:#66aa00' for the In Stock products and 'color:#ff0000' for the Out-Of-Stock products in the following two lines.

For the product page: 

<add position="replace"><![CDATA[<span style="font-weight:bold;<?php echo ($quantity > 0) ? 'color:#66aa00' : 'color:#ff0000'; ?>"><?php echo $stock; ?></span>]]></add>

For the category page:

<span style="font-weight:bold;<?php echo ($product['quantity'] > 0) ? 'color:#66aa00' : 'color:#ff0000'; ?>"><?php echo $product['stock']; ?></span>

Here you can find more information about hex colors and here you can easily choose a color that you like the most.

After you have created the document, you’ll need to save the file with the following name: nameofyourchoice.ocmod.xml and upload it through your extension installer. Make sure that you have refreshed and applied the modifications.

The stock status is displayed only in the product page in the default OpenCart theme, which means that this is where you’ll be able to see the made changes.

However, the presented code modifies the category page as well and will add the stock status of the products there too. 

If you would like to disable the modification, you’ll just need to go to Extension > Modifications, scroll down to Stock Status Color by iSenseLabs, click on the Disable button and refresh the Modifications. 

Different Colors for Different Stock Statuses

In our second example, we will add different colors to the different stock statuses. 

Again, we’ll start by making a new OCMOD file, different than the previous one by following the first few steps from our first example. Here we will copy and paste the following code:

<modification>
    <name>Stock Status Color by iSenseLabs</name>
    <version>1.1</version>
    <link>https://isenselabs.com</link>
    <author>iSenseLabs</author>
    <code>isenselabs_stock_status_color_2</code>

    <file path="catalog/controller/product/product.php">
        <operation>
            <search><![CDATA[$data['stock'] = $product_info['stock_status'];]]></search>
            <add  position="after"><![CDATA[if($data['stock'] == 'Out Of Stock') {
                    $data['stock_color'] = "#8b0707";
                } elseif ($data['stock'] == 'Pre-Order') {
                    $data['stock_color'] = "#ff9900";
                } elseif ($data['stock'] == '2-3 Days') {
                    $data['stock_color'] = "#e89f23";
                } elseif ($data['stock'] == 'Available Soon') {
                    $data['stock_color'] = "#fb5323";
                } elseif ($data['stock'] == 'In Stock') {
                    $data['stock_color'] = "#c5cc1d";
                } else {
                    $data['stock_color'] = "#ff0000";
                }]]></add>
        </operation>

        <operation>
            <search><![CDATA[$data['stock'] = $product_info['quantity'];]]></search>
            <add position="after"><![CDATA[$data['stock_color'] = "#66aa00";]]></add>
        </operation>

        <operation>
            <search><![CDATA[$data['stock'] = $this->language->get('text_instock');]]></search>
            <add position="after"><![CDATA[$data['stock_color'] = "#66aa00";]]></add>
        </operation>

    </file>

    <file path="catalog/view/theme/*/template/product/product.tpl">
        <operation>
            <search><![CDATA[<?php echo $stock; ?>]]></search>
            <add position="replace"><![CDATA[<span style="font-weight:bold; color:<?php echo $stock_color ?>"><?php echo $stock; ?></span>]]></add>
        </operation>
    </file>

    <file path="catalog/controller/product/category.php">
        <operation>
            <search><![CDATA[$this->load->language('product/category');]]></search>    
            <add position="after"><![CDATA[
                $this->load->language('product/product');
            ]]></add>
        </operation>

        <operation>
            <search><![CDATA[$data['products'][] = array(]]></search>    
            <add position="before"><![CDATA[
            if ($result['quantity'] <= 0) {
                $result['stock'] = $result['stock_status'];
                if($result['stock'] == 'Out Of Stock') {
                    $result['stock_color'] = "#8b0707";
                } elseif ($result['stock'] == 'Pre-Order') {
                    $result['stock_color'] = "#ff9900";
                } elseif ($result['stock'] == '2-3 Days') {
                    $result['stock_color'] = "#e89f23";
                } elseif ($result['stock'] == 'Available Soon') {
                    $result['stock_color'] = "#fb5323";
                } elseif ($result['stock'] == 'In Stock') {
                    $result['stock_color'] = "#c5cc1d";
                } else {
                    $result['stock_color'] = "#ff0000";
                }

            } elseif ($this->config->get('config_stock_display')) {
                $result['stock'] = $result['quantity'];
                $result['stock_color'] = "#66aa00";
            } else {
                $result['stock'] = $this->language->get('text_instock');
                $result['stock_color'] = "#66aa00";
            }
            ]]></add>
        </operation>

        <operation>
            <search><![CDATA[$data['products'][] = array(]]></search>
            <add position="after"><![CDATA[
                'quantity' => $result['quantity'],
                'stock' => $result['stock'],
                'stock_color' => $result['stock_color'],
            ]]></add>
        </operation>

    </file>
    <file path="catalog/view/theme/*/template/product/category.tpl">
        <operation>
            <search><![CDATA[<?php if ($product['rating']) { ?>]]></search>
            <add position="before"><![CDATA[
                <div class="stock-status">
                    <span style="font-weight:bold;color:<?php echo $product['stock_color']; ?>"><?php echo $product['stock']; ?></span>
                </div>
            ]]></add>
        </operation>
    </file>
</modification>

In this example you can change the colors of the stock statuses by replacing the hex colors values in the following two places:

For the Product page:

if($data['stock'] == 'Out Of Stock') {
$data['stock_color'] = "#8b0707";
} elseif ($data['stock'] == 'Pre-Order') {
    $data['stock_color'] = "#ff9900";
} elseif ($data['stock'] == '2-3 Days') {
    $data['stock_color'] = "#e89f23";
} elseif ($data['stock'] == 'Available Soon') {
    $data['stock_color'] = "#fb5323";
} elseif ($data['stock'] == 'In Stock') {
    data['stock_color'] = "#c5cc1d";
} else {
    $data['stock_color'] = "#ff0000";
}

For the Category page:

if($result['stock'] == 'Out Of Stock') {
    $result['stock_color'] = "#8b0707";
} elseif ($result['stock'] == 'Pre-Order') {
    $result['stock_color'] = "#ff9900";
} elseif ($result['stock'] == '2-3 Days') {
    $result['stock_color'] = "#e89f23";
} elseif ($result['stock'] == 'Available Soon') {
    $result['stock_color'] = "#fb5323";
} elseif ($result['stock'] == 'In Stock') {
    $result['stock_color'] = "#c5cc1d";
} else {
    $result['stock_color'] = "#ff0000";
}
} elseif ($this->config->get('config_stock_display')) {
$result['stock'] = $result['quantity'];
$result['stock_color'] = "#66aa00";
} else {
$result['stock'] = $this->language->get('text_instock');
$result['stock_color'] = "#66aa00";
}

In these lines, the color of each stock status is set after the stock status, or in other words the following code:

if($data['stock'] == 'Out Of Stock') {
$data['stock_color'] = "#8b0707";

Sets #8b0707 color for products that have Out-Of-Stock status set to “Out Of Stock”. Note that if you have created a custom stock status or you have renamed any of your stock statuses, you’ll have to modify the code as well and making sure that the new name of the stock status matches the one set in the code:

Product page:

elseif ($data['stock'] == ' The-Name-Of-Your-Custom-Status') {
    $data['stock_color'] = " the hex color value code ";

Category page:

elseif ($result['stock'] == 'The-Name-Of-Your-Custom-Status') {
    $result['stock_color'] = "the hex color value code";

Save the file with the following name: nameofyourchoice.ocmod.xml and upload through the Extension Installer. 

Please note that only one of the two OCMOD modifications files have to be uploaded and applied in your webstore, because both of them would not be functioning together. 

Final Words

​We hope that you will find this tutorial useful and easy-to-follow. Please, don’t hesitate to give us feedback or ask us any questions in the comments section below.