How to show stock status on Product Detail

[tuanphan]

To show stock status on Product Detail, like this

#1. First, use this code to Custom CSS

div.stock-product-info {
    margin-top: 10px;
    font-size: 20px;
}

#2. Next, use this code to Store Page Header Injection

<script>
window.addEventListener('DOMContentLoaded', async () => {
    const bodyClasses = document.body.classList;
    if (!bodyClasses.contains('view-item') || !bodyClasses.contains('collection-type-products')) return;
    
    const fetchJSON = async (path) => {
        const queryParams = '?format=json' + '&' + Date.now();
        const response = await fetch(path + queryParams);
        const jsonData = await response.json();
        return jsonData;
    };
    
    const productJsonData = await fetchJSON(window.location.pathname);
    if (!productJsonData.item) return;
    
    const productPriceValue = document.querySelector('.product-price-value');
    if (!productPriceValue) return;
    
    const existingStock = document.querySelector('.stock-product-info');
    if (existingStock) return;
    
    let totalStock = 0;
    let hasUnlimited = false;
    
    if (productJsonData.item.variants && productJsonData.item.variants.length > 0) {
        productJsonData.item.variants.forEach(variant => {
            if (variant.unlimited) {
                hasUnlimited = true;
            } else {
                totalStock += variant.qtyInStock || 0;
            }
        });
    }
    
    if (hasUnlimited || totalStock > 0) {
        const stockContainer = document.createElement('div');
        stockContainer.className = 'stock-product-info';
        
        let stockText = '';
        if (hasUnlimited) {
            stockText = 'In stock';
        } else {
            stockText = `${totalStock} in stock`;
        }
        
        const stockElement = document.createElement('div');
        stockElement.className = 'stock-label';
        stockElement.textContent = stockText;
        
        stockContainer.appendChild(stockElement);
        productPriceValue.insertAdjacentElement('afterend', stockContainer);
    }
});
</script>