Remove drop-downs of options with 1 variant, in Simple theme

Solved
Highlighted
Tourist
6 0 0

I am using the "Simple" theme. I have many products with options that contain only 1 variant, and I want to hide these drop-downs. How can I do it? As I saw, there are solutions for some other themes, but I couldn't found a solution for the "Simple" theme.
Please, Help. Thanks, Liad,

0 Likes
Highlighted
Shopify Partner
945 190 224

Hello,

You can use condition in your theme code. like this one

{% if product.options.size > 1 %}
Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Shopify Partner
42 8 13

This is an accepted solution.

You can use the bellow code on the product-template.liquid (paste at the end of the file)

{%- if product.variants.size == 1 -%}
<style>
.selector-wrapper{
  display: none;
}
</style>
{%- endif -%}

 

2 Likes
Highlighted
Tourist
6 0 0

Worked like magic. Thanks!

0 Likes
Highlighted
Shopify Partner
42 8 13

Great!


@Liad_Zigdon wrote:

Worked like magic. Thanks!



Please do leave a thumbs up 😉

0 Likes
Highlighted
Tourist
6 0 0

Hi again. I did a thumb up :)
But actually, there is a problem. It works fine when the product has ONE option with ONE variant.

But it does not work when there are many options. I will add some images to help you understand what I am talking about.

Screen Shot 2020-03-24 at 21.12.51.png

 

As you can see, there are three options here, and the first one has only one variant. This is what I want to hide.
Thanks again, Liad.

0 Likes
Highlighted
Shopify Partner
42 8 13

Alright, in that case, you need to replace previous code with below snippet

 

<style>
{% for option in product.options %}
	{% if product.options_by_name[option].values.size == 1 %}
		#ProductSelect-product-template-option-{{ forloop.index0 }}, [for="ProductSelect-product-template-option-{{ forloop.index0 }}"]{
			display: none !important;
		}
        .selector-wrapper:nth-of-type({{ forloop.index }}){
        	padding: 0 !important;
        }
	{% endif %}
{% endfor %}
</style>
0 Likes
Highlighted
Tourist
6 0 0

Hi again and really, thank you for your fast replies!

I am sorry to bother you, but there is one last issue.
Your last solution solved the previous issue where there were many options, but it created a small problem when there is one option (the drop-down disappears, but his title stays). I will add 2 photos, one that shows the problem, and that shows that the previous issue has been solved.

I really appreciate your help man!
Liad.
Screen Shot 2020-03-24 at 22.58.44.pngScreen Shot 2020-03-24 at 22.59.01.png

0 Likes
Highlighted
Shopify Partner
42 8 13

Oh, I had included the code for hiding dropdown labels in the previous snippet. I have requested for store collaborator access please accept that so that I can look into the issue.

0 Likes
Highlighted
Tourist
6 0 0

I accepted.

0 Likes