JustinWDev of Archived Theme Support
2/26/2016 - 9:17 PM

Hide product option drop-down when there's only one option in it.

Hide product option drop-down when there's only one option in it.

What you have

For the purpose of Google shopping or else, you may need to specify a style or color for a your product variants, even when all variants of that product come in one color and one style:

^ so the Style and Color drop-downs only have one option in them.

What you want

Despite that, you want to only show the Size drop-down on the product page:

How to get that

Given that your theme uses option_selection.js aka product option drop-downs, locate the options builder new Shopify.OptionSelectors(....

Right after that call, add this:

jQuery('.selector-wrapper').filter(function() {
  return jQuery(this).find('option').size() === 1
}).hide();

If you want to hide and replace with the one value, use that instead:

jQuery('.selector-wrapper').each(function() {
  if (jQuery(this).find('option').size() == 1) {
    var label = jQuery(this).find('label, select').hide();
    var select = jQuery(this).find('select').hide();
    jQuery(this).append('<p>' + label.text() + ': ' + select.val() + '</p>');    
  }
});