Remove Size Variant when no size to show - Currently shows 'NOSIZE' (Bumping post by asking again)

Solved
BestGift
Excursionist
19 0 5

Help Needed Please.

I am on Minimal theme and whenever I show products that have 'no sizes' to display there is a 'size NOSIZE' dropdown that shows.

Screenshot below.

Screenshot 2021-01-30 at 19.53.08.png

I would like to see if there is a way I can make sure that the size dropdown doesn't show when there are No Size is available.

Is this possible at all?

I had someone help me and provide some code... which worked to some extent but it ended up removing the Size Variant when 'NOSIZE' was showing and also removed the colour variant when only 1 colour was available.

I would like to see if there is a way that it can be isolated to just hide the Size when the available option of sizes is less than 1.

https://purestylecollection.com/collections/mens-watches/products/kom-w3012

Thanks in advance for the help, if anyone can offer any?

0 Likes

@BestGift 
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 removeNoSize() {
function _isProductPage() {
return /product/.test(window.location.href);
}
if (!_isProductPage()) {
return;
}
var $variants = document.querySelector(`option[value="NOSIZE"],option[value="nosize"]`);

if (!$variants) {
return
}

$variants.closest('.selector-wrapper').remove();
}
removeNoSize();




</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
BestGift
Excursionist
19 0 5

Hi,

 

Thank you for your super fast response.

I tried to add the code but it didn't do anything unfortunately.

I pasted the code before the </body> tag, but on website refresh nothing had changed.

Any ideas??

0 Likes

@BestGift 

Hey,

Did you save the theme.liquid file after adding the code? Or did you add it to an offline theme? By inspecting your website's code I don't see the script added in. 

◦ 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
BestGift
Excursionist
19 0 5

Hi, I added it and then removed it again when I saw it hadn't worked.

I have added it again now if you are able to take a look?

Thanks again

 

 

0 Likes

This is an accepted solution.

@BestGift 

Thanks for the update. Please remove the previous code and add this one instead:

<script>
  
async function removeNoSize() {
function _isProductPage() {
return /product/.test(window.location.href);
}
if (!_isProductPage()) {
return;
}

  
  
  function _waitForElement(selector, delay = 50, tries = 250) {
    const element = document.querySelector(selector);

    // creates a local variable w/ the name of the selector to keep track of all tries
    if (!window[`__${selector}`]) {
      window[`__${selector}`] = 0;
    }

    function _search() {
      return new Promise((resolve) => {
        window[`__${selector}`]++;
        console.log(window[`__${selector}`]);
        setTimeout(resolve, delay);
      });
    }

    //element not found, retry
    if (element === null) {
      if (window[`__${selector}`] >= tries) {
        window[`__${selector}`] = 0;
        return Promise.reject(null);
      }

      return _search().then(() => _waitForElement(selector));
    } else {
      return Promise.resolve(element);
    }
  }
var $variants = await _waitForElement(`option[value="NOSIZE"],option[value="nosize"]`);

if (!$variants) {
return
}

$variants.closest('.selector-wrapper').remove();
}
removeNoSize();





</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.
BestGift
Excursionist
19 0 5

Yes, That's amazing thank you.

Works perfectly.

I have been struggling for a while now to get that to show correctly. Thanks again.

 

There is something else I am struggling with, if you possibly have a solution to this?

It's to do with the back button that I have managed to load on my product pages. The back link shows correctly, to the top left of the page.. and it takes the customer back to the collection page as required. The problem is that if the customer has been on page 5 of the collection page and clicks into a product, when they click 'back' this takes them to the start of page 1 of the collection instead of to the page they were just viewing (or where they were in the scrolling of the page instead of back to the beginning of the page.)

BestGift_0-1612209310441.png

 

Hopefully that makes sense and there is a solution that you might have to that.

Super grateful for the help.

0 Likes