Need help to hide a variant option in the variant picker - Studio theme

[hutchseo]

Hi all,

I am trying to hide the quantity options of “3 Bags” and “4 Bags” on this page:
https://shop.genesisgold.com/products/genesis-gold

I’ve tried a lot of different options but can’t quite seem to sort it out.

Any help would be very much appreciated.

Thanks!

[WalkYourStyle]

If you want to remove the quantities ‘3 Bags’ and ‘4 Bags’ you should go to the product and remove the variant options from there, because what’s the point of having those variant options when you want to hide them?

[Shadab_dev]

@hutchseo you could do what @WalkYourStyle said since adding the variants again when you need it is not that of a trouble, will save you to write some code.

And one more thing your mobile layout is messed up due to an image or video overflowing

[hutchseo]

Thanks for your reply. We were hoping to hide them temporarily until more inventory arrives. The last time we had to delete variants and add them again later, it messed up our subscriptions and/or fulfillment services, so it seems like it would just be easier to add a bit of code to temporarily hide these options when we need to.
Thanks!

[hutchseo]

Thanks for letting me know! I’ll check that out.

I replied above: Thanks for your reply. We were hoping to hide them temporarily until more inventory arrives. The last time we had to delete variants and add them again later, it messed up our subscriptions and/or fulfillment services, so it seems like it would just be easier to add a bit of code to temporarily hide these options when we need to.
Thanks!

[Shadab_dev]

@hutchseo i am not sure if this will work since you are using a premium theme i will have to get access to your store for live updates. Until that you can try this to hide 3bags and 4bags options.

Add this in your base.css/theme.css/main.css/styles.css file down below towards the end.

.js.product-form__input label:nth-last-child(2), .js.product-form__input label:nth-last-child(1) {

display: none;

}
@media(max-width: 767px){
.product__description iframe{

width: 90vw !important;

}

}
This code also takes care of your mobile mishap.
Let me know if this works out for you. If it does dont forget to like and mark it as solution.

Email me if you need help ever for these coding stuffs, theme customization etc.

Buy me coffee if you feel i was helpful.

Thanks anyways

[hutchseo]

Hi @Shadab_dev - That almost worked! Two things:

1. It only removed the 4 Bags option and not the 3 Bags.

2. This seems to affect other pages as well across the site. Is there any way to make it specific to that page alone?

Thanks so much!

[Shadab_dev]

@hutchseo Try this

[id^=“MainProduct-template”] .js.product-form__input label:nth-last-child(3), [id^=“MainProduct-template”] .js.product-form__input label:nth-last-child(1) {

display: none;

}
@media(max-width: 767px){
.product__description iframe{

width: 90vw !important;

}

}

This atleast should now work on only the product page. Please Try again to see if atleast the changes take place on product page and not anywhere else. This should also hide 3 bags

Thanks

[hutchseo]

Hi @Shadab_dev ,

I meant that there are other products utilizing this same variant picker type of functionality and we only want it for this page in particular. Would that be possible?

Thanks so much!

[Shadab_dev]

@hutchseo by this page you mean only this product. Ri8??

So for other products you are taking orders for 3&4 bags.

Ami getting it right?

[WalkYourStyle]

What theme are you using ?

[hutchseo]

@WalkYourStyle - Studio

[hutchseo]

@Shadab_dev - Not exactly. Different products might have different variant pickers.

For example:
https://shop.genesisgold.com/products/genesis-gold - has up to 4 Bags

https://shop.genesisgold.com/products/genesis-gold-and-sacred-seven - has up to 3 Bags

https://shop.genesisgold.com/products/sacred-seven - has up to 4 Bags but we don’t want any of these hidden.

[Shadab_dev]

@hutchseo it is possible just have to write bit more css.

Is this list all?? Provide me all the list of products for which you want to show or all the list of products that you don’t wanna show, so any one the other one will be understandable.

How many products do you have by the way??

[WalkYourStyle]

Instructions

1. Go to ‘Online Store’ → Themes → Edit Code.
2. In the Snippets folder, locate the file ‘product-variant-options.liquid’.
3. Copy the entire code from this file.
4. In the Snippets folder, click on ‘+ Add a new snippet’.
5. Create a new snippet and name it “product-variant-options-backup.liquid”.
6. Open ‘product-variant-options-backup.liquid’.
7. Paste the code you copied from ‘product-variant-options.liquid’.
8. Go to ‘product-variant-options.liquid’.
9. In the code, find the line that says {%- elsif picker_type == 'button' -%}.
10. Copy everything inside the elsif statement. It should be something like this:

11. Replace it with :

{% if product.handle == 'genesis-gold' %}
      {% if value != '3 Bags' or value != '4 Bags' %}
        
      {% endif %}
{% else %}
      
{% endif %}

Hope this helps.

[BerkOnur]

Third-party apps make it easy to separate variants. I own the Stamp – Collection Variants app , and we help merchants display variants separately on the collection page and home page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.
https://youtu.be/Pdk4JmfJjqQ