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

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

hutchseo
New Member
7 0 0

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!

Replies 14 (14)

WalkYourStyle
Tourist
149 23 20

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?

hutchseo
New Member
7 0 0

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!

WalkYourStyle
Tourist
149 23 20

What theme are you using ?

hutchseo
New Member
7 0 0

@WalkYourStyle - Studio

WalkYourStyle
Tourist
149 23 20

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:

studio.PNG

11. Replace it with :

 

 

{% if product.handle == 'genesis-gold' %}
      {% if value != '3 Bags' or value != '4 Bags' %}
        <!-- The equivalent green squared code -->
      {% endif %}
{% else %}
      <!-- The equivalent green squared code -->
{% endif %}

 

 

Hope this helps.

 

Shadab_dev
Shopify Partner
160 5 18

@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

 

Screenshot_2024-07-02-07-21-20-190_com.android.chrome.jpg

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
hutchseo
New Member
7 0 0

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
Shopify Partner
160 5 18

@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

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
hutchseo
New Member
7 0 0

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
Shopify Partner
160 5 18

@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

 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
hutchseo
New Member
7 0 0

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
Shopify Partner
160 5 18

@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?

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
hutchseo
New Member
7 0 0

@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
Shopify Partner
160 5 18

@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??

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks