Display SKU on product pages

Site URL: https://www.middleburgtack.com/jumping

Greetings! I would like to display the SKU on the product pages, does anyone have any suggestions for that? I'm sure there's a way to do it with some code insertion but I'm not smart enough to do it. I'd like the SKU to show on the main product pages below the price. Thanks! 

On Product List pages like https://www.middleburgtack.com/jumping, the SKU is not in the markup and so it isn't straightforward to display it. The SKU can be extracted from the JSON but as you are using filtering, this will delay page loading. As you appear to be using the SKU for image filenames, an easier option will be to display the image name below the price.

3 hours ago, paul2009 said:

On Product List pages like https://www.middleburgtack.com/jumping, the SKU is not in the markup and so it isn't straightforward to display it. The SKU can be extracted from the JSON but as you are using filtering, this will delay page loading. As you appear to be using the SKU for image filenames, an easier option will be to display the image name below the price.

 

That would be a great solution, thanks so much for the insight. Forgive me if I missed it in the styles and settings, would this need to be done through code injection or is that an option I'm missing somewhere? 

this is what i did to insert the SKU right below the price on a single product page (don't have this for category/list page)... hope it helps.

<script>  
jQuery(document).ready(function() {
jQuery("<div id='sku'></div>").insertAfter(".ProductItem-product-price" );
    
var pathname = window.location.pathname;
jQuery.ajax({
  url: pathname + "?format=json-pretty",
  dataType: "json",
  success: function (data) {
    sku = data.item.structuredContent.variants[0].sku;
jQuery("#sku").html("<b>SKU:</b> " + sku);
}
});
});  
</script>

On 10/9/2021 at 2:34 PM, Sophik said:

this is what i did to insert the SKU right below the price on a single product page (don't have this for category/list page)... hope it helps.

<script>  
jQuery(document).ready(function() {
jQuery("<div id='sku'></div>").insertAfter(".ProductItem-product-price" );
    
var pathname = window.location.pathname;
jQuery.ajax({
  url: pathname + "?format=json-pretty",
  dataType: "json",
  success: function (data) {
    sku = data.item.structuredContent.variants[0].sku;
jQuery("#sku").html("<b>SKU:</b> " + sku);
}
});
});  
</script>

 

Hey Sophik! Sorry about for my ignorance.. but where should i insert this code? Advanced -> code injection?  thanks

On 3/31/2023 at 1:32 AM, yuribtonani said:

Hey Sophik! Sorry about for my ignorance.. but where should i insert this code? Advanced -> code injection?  thanks

Yes. Settings > Advanced > Code Injection > Footer

On 4/2/2023 at 5:22 AM, tuanphan said:

Yes. Settings > Advanced > Code Injection > Footer

you are AWESOME.