Show “Only X available” when Variant option has under 5 in Stock

To show “Only X available” when variant option has under 5 in Stock, like this.

or this.

You can use this code to Store Page Header Injection

<!-- show xx available @tuanphan - 21-09-2025 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if (window.location.pathname.includes('/store/p/')) {
        
        function getVariantStock(selectedOptions) {
            return new Promise((resolve) => {
                if (window.Static && window.Static.SQUARESPACE_CONTEXT && window.Static.SQUARESPACE_CONTEXT.item) {
                    const item = window.Static.SQUARESPACE_CONTEXT.item;
                    if (item.variants && Array.isArray(item.variants)) {
                        const matchingVariant = item.variants.find(variant => {
                            if (!variant.attributes) return false;
                            
                            for (let optionName in selectedOptions) {
                                if (variant.attributes[optionName] !== selectedOptions[optionName]) {
                                    return false;
                                }
                            }
                            return true;
                        });
                        
                        if (matchingVariant && matchingVariant.qtyInStock) {
                            resolve(matchingVariant.qtyInStock);
                        } else {
                            resolve(0);
                        }
                        return;
                    }
                }
                
                const productUrl = window.location.pathname;
                fetch(productUrl + '?format=json-pretty')
                    .then(response => response.json())
                    .then(data => {
                        if (data.item && data.item.variants && Array.isArray(data.item.variants)) {
                            const matchingVariant = data.item.variants.find(variant => {
                                if (!variant.attributes) return false;
                                
                                for (let optionName in selectedOptions) {
                                    if (variant.attributes[optionName] !== selectedOptions[optionName]) {
                                        return false;
                                    }
                                }
                                return true;
                            });
                            
                            if (matchingVariant && matchingVariant.qtyInStock) {
                                resolve(matchingVariant.qtyInStock);
                            } else {
                                resolve(0);
                            }
                        } else {
                            resolve(0);
                        }
                    })
                    .catch(() => resolve(0));
            });
        }
        
        function getSelectedOptions() {
            const selectedOptions = {};
            
            $('select[name*="variant-option"]').each(function() {
                const $select = $(this);
                const selectedValue = $select.val();
                
                if (selectedValue && selectedValue !== '') {
                    const optionName = $select.attr('name').replace('variant-option-', '').replace('-select', '');
                    selectedOptions[optionName] = selectedValue;
                }
            });
            
            return selectedOptions;
        }
        
        function checkAndDisplayVariantStock() {
            const selectedOptions = getSelectedOptions();
            const optionKeys = Object.keys(selectedOptions);
            const totalVariantOptions = $('select[name*="variant-option"]').length;
            
            $('.variant-stock-info').remove();
            
            if (optionKeys.length === totalVariantOptions) {
                getVariantStock(selectedOptions).then(stock => {
                    if (stock > 0 && stock < 5) {
                        const stockHtml = `<div class="variant-stock-info" style="margin-top: 8px; font-size: 14px; color: #666;">Only ${stock} available</div>`;
                        $('.product-price').after(stockHtml);
                    }
                });
            }
        }
        
        $('select[name*="variant-option"]').on('change', function() {
            checkAndDisplayVariantStock();
        });
        
        var urlParams = new URLSearchParams(window.location.search);
        var hasPreselectedVariants = false;
        
        urlParams.forEach(function(value, key) {
            if (key.startsWith('variant-')) {
                hasPreselectedVariants = true;
            }
        });
        
        if (hasPreselectedVariants) {
            setTimeout(() => {
                checkAndDisplayVariantStock();
            }, 100);
        }
    }
});
</script>