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. 

I have attempted to use this code as stated above, and there is no change to the SKU appearing on the product pages.  Does this work for SquareSpace 7.1?  Any assistance in getting the SKU to appear would be greatly appreciated.

On 10/9/2021 at 6: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>

 

Hi Sophik,

I installed this code to display the product SKU code on the product page itself and it works great. My only question is wether it is possible to have the SKU change when the viewer selected a different variant? Each variant has a different SKU code, but when I click a different variant, the SKU remains the same which is a bit misleading to the customer. 

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

Yes. Settings > Advanced > Code Injection > Footer

Hi Tuan, 

Have you any ideas on how I might get this code to update when different variants are selected? Each variant has a different SKU code, but when I click a different variant, the SKU remains the same which is a bit misleading to the customer.