Hide unavailable variants/ values

You are here:

Add the code on this page to the theme.liquid after the <head> tag. Click here for more info

Most customers will want to use this first code

Hide unavailable variants in 2nd and 3rd product option, always show variants in first product option without sold-out styling

This will keep all of the values visible for the first product option with no sold-out styling, and hide all unavailable values for the second product option.

 <style>
/* hide unavailable variants in 2nd and 3rd product option, always show variants in first product option without sold out styling */
#bcpo .selector-wrapper:nth-child(2).bcpo-images div.bcpo-image-parent,
#bcpo .selector-wrapper:nth-child(2).bcpo-colors div.bcpo-color-parent,
#bcpo .selector-wrapper:nth-child(2).bcpo-buttons .single-option-selector label {
border: 1px solid #a0a0a0;
}
#bcpo .selector-wrapper:nth-child(2).bcpo-images div.bcpo-image-parent label,
#bcpo .selector-wrapper:nth-child(2).bcpo-colors div.bcpo-color-parent label,
#bcpo .selector-wrapper:nth-child(2).bcpo-buttons label {
opacity: 1 !important;
}
#bcpo .selector-wrapper:nth-child(2).bcpo-colors div.bcpo-disabled:hover,
#bcpo .selector-wrapper:nth-child(2).bcpo-colors div.bcpo-really-disabled:hover,
#bcpo .selector-wrapper:nth-child(2).bcpo-images div.bcpo-disabled:hover,
#bcpo .selector-wrapper:nth-child(2).bcpo-images div.bcpo-really-disabled:hover,
#bcpo .selector-wrapper:nth-child(2).bcpo-buttons label.bcpo-disabled:hover,
#bcpo .selector-wrapper:nth-child(2).bcpo-buttons label.bcpo-really-disabled:hover {
border: 1px solid black !important;
}
#bcpo .selector-wrapper:nth-child(3) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(3) .bcpo-really-disabled {
display: none !important;
}
#bcpo .selector-wrapper:nth-child(4) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(4) .bcpo-really-disabled {
display: none !important;
}
</style>
It’s best to turn off tooltips in the settings of the app so the “sold out” and “unavailable” tooltips don’t show for the first product option.

This code only works to display the first product options variants as in stock if the product option is image or color swatches, and normal dropdowns. It doesn’t work with enhanced dropdowns as the first product option

Hide unavailable variants

This will hide variants that aren’t available in any combinations.

<style>
/* hide unavailable variants */
.bcpo-really-disabled {
display: none !important;
}
</style>

Hide unavailable variants in 2nd product option

This will keep all of the values visible for the first product option and hide all unavailable values for the second product option. The values in the first product option will still show the sold-out styling.

<style>
/* hide unavailable variants in 2nd product option */
#bcpo .selector-wrapper:nth-child(3) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(3) .bcpo-really-disabled {
display: none !important;
}
</style>

Hide unavailable variants in 2nd & 3rd product option

This will keep all of the values visible for the first product option and hide all unavailable values for the second & 3rd product option. The values in the first product option will still show the sold-out styling.

<style>
/* hide unavailable variants in 2nd & 3rd product option */
#bcpo .selector-wrapper:nth-child(3) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(3) .bcpo-really-disabled {
display: none !important;
}
#bcpo .selector-wrapper:nth-child(4) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(4) .bcpo-really-disabled {
display: none !important;
}
</style>
Was this article helpful?
Dislike

Pin It on Pinterest