How To Replace The Inventory Levels With Your Own Custom Text

The code below shows you how to replace the numeric inventory levels with your own text. This is useful if you want to hide the exact number of products you have remaining in your inventory. For example, instead of showing that you only have 1 product left, you could change it to say "Low Stock", or if you have more than 1 product you could display "In Stock".

Instructions

1. Login to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the product.html file.

2. Add the following code under the %%Panel.Footer%% text :

   
   <script type="text/javascript">
       var inStockMessage = "In Stock";
       var lowStockMessage = "Low Stock";
   
       function replaceInventory(){
           var inventoryLevel = parseInt($(".InventoryLevel .VariationProductInventory").text());
           if(inventoryLevel >= 3) {
               $(".InventoryLevel .VariationProductInventory").text(inStockMessage);
           }
   
           if(inventoryLevel <= 2) {
               $(".InventoryLevel .VariationProductInventory").text(lowStockMessage);
           }
       }
   
       replaceInventory();
   
       $(document).ajaxComplete(function(event,request, settings) {
               replaceInventory();
       });
   </script>
   
   
   

3. Save your changes.

How It Works

If you have the inventory option enabled in your store you should see the new text instead of the numeric values on the product pages. If you have 3 or more products in your inventory then the level will show "In Stock", anything below that will display a "Low Stock" message. You can change the messages by modifying the two variables in the script: inStockMessage and lowStockMessage. The code will also work with product options where each SKU has a different inventory level.

Troubleshooting

If the inventory levels do not show up... then turn on inventory tracking from the control panel by navigating to Setup & Tools -> Inventory and selecting the Show Stock Levels option under the Stock level section. You must also turn on inventory tracking for each individual product.

If the inventory levels show up, but are not replaced by your custom text... then fix any Javascript errors on the product page. You can check for errors by opening up the console in your favorite browser. If you use Google Chrome, you can press F12 and then click on the 'Console' tab to identify the errors on the page.

For all other questions, comments, or modifications... contact our experienced Bigcommerce developers!