Remove dropdown menu with only one option

[nndbrgs]

Hello.

I'm building a dropshipping store and almost all of my products have multiple variations of colors and sizes, most of them are shipped from a lot of countries too.

The thing is, I'm only buying the products from China and even when I delete all the "Ships from" variations it keeps appearing on the products pages with only one option to be selected.

I've tried the solutions @Nitin_Kujur posted here: https://community.shopify.com/c/Shopify-Design/Remove-drop-downs-of-options-with-1-variant-in-Simple...

The first code worked just fine, but it only works for single variant products, the second one seemed to work for other people, but I'm using Venture theme and it didn't work at all for me.

Resuming: I want a solution to hide all my dropdown menus that has only one option to be selected on the Venture theme.

Store link (it's in portuguese): https://www.quatropatas.club (https://quatro-patas-club.myshopify.com/)

Store pw: naitsa

Product example (I wanna hide the "Entrega" menu): https://quatropatas.club/collections/transporte/products/mochila-de-transporte-dobravel

I will really appreciate any help, I'm just starting this Shopify journey and I'm really exited!

Single variant product:

Single variant product with @Nitin_Kujur solution:

Multiple variants product with single variant dropdown menu:

[DeepCode · Accepted solution]

Try to add the JS script to the end of theme.js

$(document).ready(function(){
    for (const select of $(".template-product select")) {
         if ($(select).children().length == 1) {
            $(select).closest(".selector-wrapper").hide();
         }
    }
})

[nndbrgs]

Woooah, that worked almost perfectly. Thank you so, so much!

Just a perfectionist question, the dropdown menu is visible for something like a second when I open the page, is it possible to make it invisible even for this period of time?

I know it's a silly question, but as I've said, I'm a perfectionist. But your answer helped me a lot already. Thank you again

[DeepCode]

It is a client side solution, so I don’t think it is possible to make that perfect but it depends on the network speed, if everything loads fast, it is hard to notice. 

If you have any problems in the future for your Shopify, you can visit my YouTube channel, I am keeping posting videos on how to fix different problems on Shopify store, you may have some thing useful there   https://youtube.com/channel/UCxx8s_d6t_RKNqHrp-4bpvQ

[nndbrgs]

No problem @DeepCode. And thanks again for your help.

[Bflaherty03]

Is there a way to do this in the Debut theme? 

[DeepCode]

@Bflaherty03 it should work for debut theme

[Bflaherty03]

Unfortunately that did not work. I edited theme.js and added that code to the bottom but it did not change anything.

[paul_wing]

add this to product-template.liquid

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

you'll need to add it to the part of the code that iterates over the options. mine looks like this:

{% unless product.has_only_default_variant %}
        <div class="product-form__controls-group">
          {% for option in product.options_with_values %}
          <div class="selector-wrapper js product-form__item" {% if option.values.size == 1%} style="display: none;"{% endif %}>
            <label for="SingleOptionSelector-{{ forloop.index0 }}">
              {{ option.name }}
            </label>
            <select 
                    data-option-ezfy="option{{ forloop.index }}"
                    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>