Hide variant selection box for products with single variant in supply theme

[JoshP23]

Hello, I am trying to hide the variant selection drop down box for my products with only a single variant. I am using a customized version of the supply theme, and haven't been able to get this to work properly. I have tried adding this code to the bottom of my theme.scss.liquid

.selector-wrapper {
    display: none!important;
}

 which hides all variant selections, but the problem is that I have some products that do contain variants.

The products with variants are using a separate product template, so I'm wondering if there is some code I can add to the main product-template.liquid that will apply to only the products using the default template?

I have tried commenting out the {% form 'product' .... %} block, which hides the variant options, but breaks being able to add items to the cart. I have tried adding display="none" to several places within that block, but that breaks the way we have our cart set up to pop up a small window with the cart, and instead sends to a separate page for the cart. We would like to retain the way our cart currently functions. 

To be clear: We want products with only one variant to not display variant selection, and auto select the default variant when added to cart.

[LitExtension]

Hi @JoshP23,

Please go to theme.js.liquid file and add code here:

Code:

if($('.single-option-selector option').length < 2) {
    $('.single-option-selector option').hide();
}

Hope it helps!

[JoshP23]

Thanks for your reply, I tried your code in the theme.js.liquid file, but all that did was make it so there were no options within the dropdown menu. I am looking to remove the box altogether.

   

[gr_trading]

Hi @JoshP23 ,

Please use below code in main-product.liquid where variant code written.

{% if product.options_with_values.size > 1 %} style="display: none;"{% endif %}

In Shopify 2.0's Dawn theme variant display available in two different looks, since as screenshot attached I can see you are using dropdown variant for your theme.

You have to place your code at line number 374, attaching screenshot for your reference.

Variant code are placed at three line 352 and 374. It's better if you place on both place or group them into one tag and then use above suggested code.

Hope this will help.

[SiteBuilder]

Hello, this seems to have changed since in Dawn theme, where should I put that line of code on current Dawn theme?

[LitExtension · Accepted solution]

Hi @JoshP23,

Please change all code:

if($('.single-option-selector option').length < 2) {
    $('.single-option-selector').hide();
}

it will work fine

[JoshP23]

Thank you! This worked just how I wanted it to! I appreciate you sharing this knowledge with me.