Expresso Store - possible to add 'OUT OF STOCK' to size drop down?

Question

I'm building a Store selling garments using Size as the Product Modifier option and variation as the modifier Type so that each size has it's own SKU and Inventory.

My Size drop down looks like this on the product detail page:

• Small
• Medium
• Large

Is it possible to add 'Out of Stock' or 'In Stock' to the select options depending on individual stock levels so the drop down looks like this:

• Small - Out of Stock
• Medium - In Stock
• Large - In Stock

Thanks in advance

Answer 1

The main problem is that options don't always have a direct mapping to a stock level. For example, if your products have both "Size" and "Color", it doesn't make sense to say "Red is out of stock" - it depends on the size as well.

Generally the best way to solve this is using dynamic css variables. For example, simply add class="store_product_out_of_stock" to an element inside your product tag, and it will be displayed only when the selected combination is out of stock.

Alternatively, if all your products have exactly one modifier, you can use the {option_stock_level} variable inside the {modifier_options} loop. This is somewhat of a hidden feature, because generally it's not a good idea to hard code this if your products might have more than one modifier.

{modifiers}
    {modifier_options}
        {option_name}
        <!-- the following variables are only available if
             your product has exactly one modifier -->
        {option_sku}
        {option_track_stock}
        {option_stock_level}
        {option_min_order_qty}
    {/modifiers_options}
{/modifiers}