We launched another Opencart 3 free module Out Of Stock label and out of stock button, or you can take it as sold out also, these will get active when this module is installed and activated and quantity is zero. You can customize or add CSS as per your need in this module.

Installation

  • Download the module “Out Of stock
  • You will get an “outofstock.ocmod.zip” zip file
  • Go to Opencart admin >> Extensions >> Installer
  • Upload the outofstock.ocmod.zip zip file
  • Then go to admin >> Extensions >> Modifications >> Clear the cache by clicking the refresh button at the top right.
  • Now to admin >> Extensions >> Extensions >> Choose Modules >> Find Out of Stock >> Then click the install button
  • Then edit it and you will see admin settings for Out of Stock like below:
Out of Stock Admin Settings
  • Now select the Status to Enabled
  • Show Label in the Product page to Yes
  • Enter your required label like “Out of Stock” or “Sold Out”, if your site is multi-language then enter words for all language.
  • Then click Save blue button.

Now go to the front end and you can see the red label with Out of Stock ribbon if the product quantity is zero, similarly, the button becomes Out Of Stock and disabled. Like for featured products module, it will be seen as below:

Featured module out of stock

For the product page, it is like below:

Product page out of Stock

Modules and pages these gets activated as per the install.xml we created are the following:

Pages:

  • Product Page
  • Special page
  • Search page
  • Category page
  • Manufacturer info page

Modules:

  • Bestseller
  • Latest
  • Special
  • Featured

It works 100% with the default OpenCart 3 theme but it may not work in custom theme because of the OCMOD code target. Some customization may be needed for the custom theme, but we tried to adjust code matching as much as possible.

You can study and make changes to OCMOD install.xml as per your requirement

<?xml version="1.0" encoding="utf-8"?>
<modification>
    <name>Out of Stock</name>
    <version>1.1</version>
    <author>Rupak Nepali</author>
    <link>https://webocreation.com</link>
    <code>webocreation_module_outofstock2</code>
    <file path="catalog/controller/product/product.php">
        <operation>
            <search position="after"><![CDATA[$data['points'] = $product_info['points'];]]></search>
            <add><![CDATA[
                if ($this->config->get('module_outofstock_status')) {
                    $this->load->model('extension/module/outofstock');
                    $data['quantity'] = $this->model_extension_module_outofstock->getQuantity($product_info);
                    if ($data['quantity']<1){
                        $this->load->model('extension/module/outofstock');
                        $data['text_out_of_stock'] = $this->config->get('module_outofstock_label')[$this->config->get('config_language_id')];
                        $data['module_outofstockstyle'] = htmlspecialchars_decode($this->config->get('module_outofstock_style'));
                        $data['module_outofstock_show_marker_in_product_page'] = $this->config->get('module_outofstock_show_marker_in_product_page');
                    }
                }
                $data['button_cart_outOfStock'] = "Out Of Stock";
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[foreach ($results as $result) {]]></search>
            <add><![CDATA[
                foreach ($results as $result) {
                    if ($this->config->get('module_outofstock_status')) {
                        $this->load->model('extension/module/outofstock');
                        $data['text_out_of_stock'] = $this->config->get('module_outofstock_label')[$this->config->get('config_language_id')];
                        $data['module_outofstock_style'] = htmlspecialchars_decode($this->config->get('module_outofstock_style'));
                    }
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[$data['products'][] = array(]]></search>
            <add><![CDATA[
                $data['products'][] = array(
                    'quantity' => ($this->config->get('module_outofstock_status'))?$this->model_extension_module_outofstock->getQuantity($result):1, 
                ]]>
            </add>
        </operation>
    </file>
    <file path="catalog/view/theme/*/template/product/product.twig">
        <operation>
            <search position="replace"><![CDATA[<ul class="nav nav-tabs"> ]]></search>
            <add><![CDATA[
                        <div class="clearfix"></div><ul class="nav nav-tabs">
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<a class="thumbnail" href="{{ popup }}" ]]></search>
            <add><![CDATA[
                        {% if module_outofstock_style and module_outofstock_show_marker_in_product_page and module_outofstock_show_marker_in_product_page %}
                            <style>
                                {{module_outofstock_style}}</style>
                        {% endif %}
                        {% if  (quantity < 1) and text_out_of_stock and module_outofstock_show_marker_in_product_page %}
                            <div class="box"><div class="ribbon"><span>{{ text_out_of_stock }}</span></div></div>
                        {% endif %}
                        <a class="thumbnail" href="{{ popup }}" 
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[ {{ header }} ]]></search>
            <add><![CDATA[
                    {{ header }}
                    {% if module_outofstock_style and module_outofstock_style %}
                        <style>
                            {{module_outofstock_style}}</style>
                    {% endif %}
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>]]></search>
            <add><![CDATA[
                {% if  (quantity < 1) %}
                    <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-lg btn-block" disabled>{{ button_cart_outOfStock }}</button>
                {% else %}
                    <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>
                {% endif %}
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<div class="product-thumb transition">]]></search>
            <add><![CDATA[
               <div class="product-thumb transition">
                    {% if (product.quantity<1) and text_out_of_stock %}
                        <div class="box"><div class="ribbon"><span>{{ text_out_of_stock }}</span></div></div>
                    {% endif %}
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<button type="button" onclick="cart.add('{{ product.product_id }}']]></search>
            <add><![CDATA[
                {% if  (product.quantity < 1) %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');" disabled><span class="hidden-xs hidden-sm hidden-md" disabled>{{ button_cart_outOfStock }}</span></button>
                {% else %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}'
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<i class="fa fa-shopping-cart"></i></button>]]></search>
            <add><![CDATA[
                <i class="fa fa-shopping-cart"></i></button>
                {% endif %}
                ]]>
            </add>
        </operation>
    </file>
    <file path="catalog/controller/product/{search,category,special,manufacturer}*.php">
        <operation>
            <search position="replace"><![CDATA[$data['products'] = array();]]></search>
            <add><![CDATA[  
                    $data['products'] = array();       
                    $data['module_outofstock_style'] = false;
                    $data['button_cart_outOfStock'] = "Out Of Stock";
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[foreach ($results as $result) {]]></search>
            <add><![CDATA[
                    foreach ($results as $result) {
                    if ($this->config->get('module_outofstock_status')) {
                        $this->load->model('extension/module/outofstock');
                        $data['text_out_of_stock'] = $this->config->get('module_outofstock_label')[$this->config->get('config_language_id')];
                        $data['module_outofstock_style'] = htmlspecialchars_decode($this->config->get('module_outofstock_style'));
                    }
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[$data['products'][] = array(]]></search>
            <add><![CDATA[
                $data['products'][] = array(
                    'quantity' => ($this->config->get('module_outofstock_status'))?$this->model_extension_module_outofstock->getQuantity($result):1,
                ]]>
            </add>
        </operation>
    </file>
    <file path="catalog/view/theme/*/template/product/{search,special,category,manufacturer_info}*.twig">
        <operation>
            <search position="replace"><![CDATA[{{ header }}]]></search>
            <add><![CDATA[
                    {{ header }}
                    {% if module_outofstock_style %}
                    <style>{{ module_outofstock_style }}</style> 
                    {% endif %}
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<div class="product-layout product-list col-xs-12">]]></search>
            <add><![CDATA[
                <div class="product-layout product-list col-xs-12">  
                {% if (product.quantity<1) and text_out_of_stock %}
                    <div class="box"><div class="ribbon"><span>{{ text_out_of_stock }}</span></div></div>
                {% endif %}
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<button type="button" onclick="cart.add('{{ product.product_id }}']]></search>
            <add><![CDATA[ 
                {% if  (product.quantity < 1) %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');" disabled><span class="hidden-xs hidden-sm hidden-md" disabled>{{ button_cart_outOfStock }}</span></button>
                {% else %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}'
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[{{ button_cart }}</span></button>]]></search>
            <add><![CDATA[
                {{ button_cart }}</span></button>
                {% endif %}
                 ]]>
            </add>
        </operation>
    </file>
    <file path="catalog/controller/extension/module/{bestseller,latest,special}*.php">
        <operation>
            <search position="replace"><![CDATA[foreach ($results as $result) {]]></search>
            <add><![CDATA[
                $data['button_cart_outOfStock'] = "Out Of Stock";
              foreach ($results as $result) {
                if ($this->config->get('module_outofstock_status')) {
                    $this->load->model('extension/module/outofstock');
                    $data['text_out_of_stock'] = $this->config->get('module_outofstock_label')[$this->config->get('config_language_id')];
                    $data['module_outofstock_style'] = htmlspecialchars_decode($this->config->get('module_outofstock_style'));
                } else{ 
                $data['module_outofstock_style'] = false;
                }
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[$data['products'][] = array(]]></search>
            <add><![CDATA[
                 $data['products'][] = array(
                    'quantity' => ($this->config->get('module_outofstock_status'))?$this->model_extension_module_outofstock->getQuantity($result):1,  
                ]]>
            </add>
        </operation>
    </file>
    <file path="catalog/controller/extension/module/featured.php">
        <operation>
            <search position="replace"><![CDATA[foreach ($products as $product_id) {]]></search>
            <add><![CDATA[
                $data['button_cart_outOfStock'] = "Out Of Stock";
                foreach ($products as $product_id) {
                if ($this->config->get('module_outofstock_status')) {
                    $this->load->model('extension/module/outofstock');
                    $data['text_out_of_stock'] = $this->config->get('module_outofstock_label')[$this->config->get('config_language_id')];
                    $data['module_outofstock_style'] = htmlspecialchars_decode($this->config->get('module_outofstock_style'));
                } else{ 
                    $data['module_outofstock_style'] = false;
                }
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[$data['products'][] = array(]]></search>
            <add><![CDATA[
                 $data['products'][] = array(
                    'quantity' => ($this->config->get('module_outofstock_status'))?$this->model_extension_module_outofstock->getQuantity($product_info):1,     
                ]]>
            </add>
        </operation>
    </file>
    <file path="catalog/view/theme/*/template/extension/module/{bestseller,featured,latest,special}*.twig">
        <operation>
            <search position="replace"><![CDATA[<h3>{{ heading_title }}</h3>]]></search>
            <add><![CDATA[
                <h3>{{ heading_title }}</h3>
                {%  if module_outofstock_style %}
                    <style>{{module_outofstock_style}}</style>
                {% endif %}
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">]]></search>
            <add><![CDATA[
               <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
                {%  if (product.quantity<1) and text_out_of_stock %}
                <div class="box"><div class="ribbon"><span>{{ text_out_of_stock }}</span></div></div>
                {% endif %}
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[<button type="button" onclick="cart.add('{{ product.product_id }}']]></search>
            <add><![CDATA[
                {% if  (product.quantity < 1) %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');" disabled><span class="hidden-xs hidden-sm hidden-md" disabled>{{ button_cart_outOfStock }}</span></button>
                {% else %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}'
                ]]>
            </add>
        </operation>
        <operation>
            <search position="replace"><![CDATA[{{ button_cart }}</span></button>]]></search>
            <add><![CDATA[
                {{ button_cart }}</span></button>
                {% endif %}
                 ]]>
            </add>
        </operation>
    </file>
</modification>

You can check the GitHub Opencart free module repositories.

You can make the ribbon as per your requirement from here https://www.cssportal.com/css-ribbon-generator/ and paste the CSS into the admin settings.

Please don’t forget to post your questions or comments so that we can add extra topics, free module or opencart tutorial that we need to develop which helps to develop quality. You can follow at twitter account rupaknpl and subscribe YouTube user opencart tutorial. Thanks a lot.

Previous articleUndefined property: Proxy::method in storage/modification/system/engine/action.php on line
Next article25 SEO best practices for Opencart 3 with 3 free SEO Opencart 3 module

17 COMMENTS

  1. Easy to install and configure by following instructions. One problem. The label is not showing on the product page. instead, it shows the words ‘out of stock’ in the top left of the image. Please assist

  2. Well installed, but takes no effect on 3.0.3.2 default theme. No label appeared, and no “Add to Cart” disabled. The cash cleared to the bottom. Made no any effect at all.

  3. Well this BROKE OC 3.0.3.6
    It completely failed to work and not only that, now on the category page. it switches from list to grid view even though you already had grid view, It does it quickly on a fast machine but a something slower it is VERY NOTICABLE and a horrible glitch. I am having real trouble REVERSING this BACK.
    I think this error probaly has something to do with it.

    FILE: system/library/template/twig.php
    CODE: $loader = new \Twig_Loader_Filesystem(DIR_TEMPLATE);
    NOT FOUND – OPERATIONS ABORTED!
    —————————————————————-
    Any Idea what I can do

    • We got it fixed. Apparently you need an upated modification.xml for later version of 3.0.3.6.
      Our web company updated it and its is working now, however the strange switch from list to grid is still happening and they are struggling to find out why. It stays even after they deleted the out of stock module.
      It is a great extension thanks, other than the minor issues.

  4. This

    completely replaces $data[‘points’] = $product_info[‘points’] in the file instead of placing the code AFTER it.
    So if you had points – you don’t any more with this extension. OC 3.0.3.6

LEAVE A REPLY

Please enter your comment!
Please enter your name here