How to show stock quantity for all variants in shopify?

How to show “xxx left in stock” on shopify product page?

Shopify – show ONLY XX AVAILABLE IN STOCK on product page

Start by adding snippet in product-template.liquid

 <div id="stockstatus">
        {% if product.variants.size < 2 %}
          {% assign current_variant= product.variants.first %}
        {% endif %}
        {% if current_variant.inventory_quantity < 1 %}
            <p class="zero">Sold Out!<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span></p>
        {% elsif current_variant.inventory_quantity < 6 %}
            <p class="few">Hurry! Only <span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> left in stock.</p>
        {% else %}
            <p class="plenty"><span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> available in stock.</p>
        {% endif %}
 </div>
<script>
     var inv_qty = {};
     {% for var in product.variants %}
           inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
     {% endfor %}
</script>

Now in theme.js or theme.js.liquid and edit function updateSku / _.updateSku

if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=zero>Sold Out!</span></p>");
    else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=few>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>");
    else $("#stockstatus").html("<p class=plenty><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");
  

Now add some CSS in custom.css or styles.css

p.zero,p.few,p.plenty{background: #b2e7b2;
    display: inline-block;
    padding: 3px 10px;}
p.few:before {
    content: "\f0e7";
    font-family: "FontAwesome";
    margin-right: 10px;}
p.zero:before {
    content: "\f119";
    font-family: "FontAwesome";
    margin-right: 10px;}
p.few,p.zero{color: #fff;background: #eb5050 !important;}

Also note, you can add css for the qty number by using selector

.variant-inventory{font-weight:bold}
or more specifically
#stockstatus .variant-inventory{font-weight:bold}

Hopefully it would work on your theme

Extend this functionality to show quantity plus minus buttons also

References:

https://community.shopify.com/c/Shopify-Design/Showing-the-stock-quantity-per-variant/m-p/428953/highlight/true#M111057

https://community.shopify.com/c/Shopify-Design/How-do-I-Show-inventory-quantities-on-product-pages-using-Debut/m-p/330715/highlight/true#M86371

https://community.shopify.com/c/Shopify-Design/See-if-a-product-has-variants/m-p/414669/highlight/true#M107631