Remove SKU from appearing on the store

Solved
chicaffluence
Tourist
8 0 1

Hello,

I have a dropshipping store which filters products through from the supplier with the SKU included. This is useful for me but definitely not required for customers.

Is there any code I can add to my theme to hide the SKU from the front-end of the store? 

I am using the theme "Debut" and my store is: www.chicaffluence.co.uk

Thank you!

0 Likes

@chicaffluence 

Hello,

In which page is the SKU showing up?

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
chicaffluence
Tourist
8 0 1

It is appearing all over the store - a few links here, here and here.

It is there for most products and I have too many to try and remove it individually.

0 Likes

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function removeSKU(){

  function _isProductPage() {
    return /product/.test(window.location.href);
  }

if (!_isProductPage()) return

var $variants = document.querySelectorAll(`label[for*='SingleOptionSelector']`);

if (!$variants) return

for (var each of $variants){

if (each.textContent.trim().toLowerCase() === 'sku'){

    each.closest('.selector-wrapper').remove();
}


}
}

removeSKU();
</script>



Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
chicaffluence
Tourist
8 0 1

Hi,

I have added this as you suggested - unfortunately, it didn't work and SKU is still appearing.

0 Likes

This is an accepted solution.

@chicaffluence 

Indeed, there was a typo in the code. Please remove the previous one and use this:

<script> function removeSKU(){ function _isProductPage() { return /product/.test(window.location.href); } if (!_isProductPage()) {return;} var $variants = document.querySelectorAll(`label[for*='SingleOptionSelector']`); if (!$variants) {return} for (var each of $variants){ if (each.textContent.trim().toLowerCase() === 'sku'){ each.closest('.selector-wrapper').remove(); } } } removeSKU(); </script>

  

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
chicaffluence
Tourist
8 0 1

Thank you so much! This has worked

0 Likes

@chicaffluence 

You're welcome! 

By the way, since you're using the Debut theme, this may eventually be useful for you.

Wishing you a nice week ahead. 

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.