Hide product variant options on Brooklyn theme

Solved
Highlighted
Tourist
20 0 1

Hello,

 

How can I hide the only variant of the product available on my site? Because its the only variant I want to sell, I don't need the customer to see or to click on this. Is there any way to hide it?

 

For context, I use the Brooklyn Theme. And the location of the variant that I am wanting to hide is on my homepage, in the featured product component.

 

thanks in advance 

 

0 Likes
Highlighted
Shopify Expert
1381 112 211
Please share a store url to better assist
0 Likes
Highlighted
Tourist
20 0 1
Highlighted
Shopify Expert
1381 112 211

Hi

You can do it by editing the product-template.liquid file. And the code you write will count if there is one variant in product. But you want to hide the variant if it has only one option. To handle this you have to add this code where variant has been place in product-template.liquid file.

{% if option.values.size == 1%} style="display: none;"{% endif %}

 In that file you will see code like this. 

<div class="selector-wrapper js product-form__item">
       <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">                 {{ option.name }}
      </label>
      <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">          {% for value in option.values %}
             <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>          {% endfor %}
      </select>
</div>

 Replace that code with below code.

<div class="selector-wrapper js product-form__item">
  <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}" {% if option.values.size == 1%} style="display: none;"{% endif %}>    {{ option.name }}
  </label>
  <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}" {% if option.values.size == 1%} style="display: none;"{% endif %}>    {% for value in option.values %}
       <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>    {% endfor %}
  </select>
</div>

 Please let me know if it was helpful.

0 Likes
Highlighted
Tourist
20 0 1

Hi Perennial,

 

Thank you for your help on this one.

 

Just having some trouble finding this coding in the specified liquid file. Could you tell me which number row I should be able to locate it on?

 

Regards

0 Likes
Highlighted

This is an accepted solution.

@Javison4,

You can also do with CSs

Please add below css in theme.scss

.product-single__form .radio-wrapper.js.product-form__item {
	display: none;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
799 124 412
If you having difficulty in editing code then i can do it for you.
-add me as a staff in your store.
Email: candisoft100@gmail.com
0 Likes
Highlighted
Tourist
20 0 1

thanks for this. Got it.

0 Likes
Highlighted
New Member
3 0 0

@oscprofessional This worked.. but it also removed variant option from other products, which have more than 1 variant.

 

My code also looks different to do it with the above solution, even though I am also using the Brooklyn theme

 

This is the only line I found by searching SingleOptionSelector

 

<select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
{% endfor %}

 

Does someone have a solution here?

0 Likes
Highlighted
Shopify Partner
799 124 412

@Amarinna  ,

Your problem is quite simple, no need of this long thread.
- your code just requires to add 1 if condition in where  Id= SingleOptionSelector.
- the condition is like below.

{% if products.variants != blank %}
loop for variant option here
{% else %}
 *no code here*
{% endif%}


-Give LIkes :)

Thank You

0 Likes