To make Variants appear on Store Page, like this
You can use this code to Store Page Header Injection
<!-- variant on shop page - @tuanphan - 22-09-2025 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>$(document).ready(function(){$('.product-list-item').each(function(){var $productItem=$(this);var productId=$productItem.data('product-id');var productLink=$productItem.find('.product-list-item-link').attr('href');if(productId&&productLink){var jsonUrl=productLink+'?format=json-pretty';$.ajax({url:jsonUrl,method:'GET',success:function(data){var variants=data.item.variants;var variantOptionOrdering=data.item.variantOptionOrdering;if(variants&&variants.length>0&&variantOptionOrdering&&variantOptionOrdering.length>0){var variantOptionsHtml='<div class="variant-options">';variantOptionOrdering.forEach(function(optionName){var uniqueValues=[];variants.forEach(function(variant){var value=variant.attributes[optionName];if(value&&uniqueValues.indexOf(value)===-1){uniqueValues.push(value)}});if(uniqueValues.length>0){uniqueValues.forEach(function(value){variantOptionsHtml+='<span class="variant-option" data-option-name="'+optionName+'" data-option-value="'+value+'">'+value+'</span>'})}});variantOptionsHtml+='</div>';$productItem.find('.product-list-item-meta').after(variantOptionsHtml)}},error:function(){console.log('Không thể lấy thông tin variants cho product: '+productId)}})}})});</script><style>div.product-list-item span.variant-option{border:1px solid #000;padding:5px 10px;display:inline-block;margin-bottom:10px;margin-left:5px;margin-right:5px}</style>
