Hi!
I want to change the look of the out of stock variant, so that it is distinctly different from the in stock buttons. Is there a way to isolate this specific css or other?
See below as it current default state and current hover state. Ideally, I’d like to change the the stroke, fill and type color of the out of stock button in both default and hover states.
Thoughts on how to do this?
Hi there,
Yes, you can definitely target out-of-stock variant buttons separately with CSS. Most Shopify themes apply a specific class (often something like .disabled, .soldout, or [disabled]) to those buttons. You can use that selector to style them differently from in-stock variants. For example:
/* Default out of stock */
.product-form__variants button[disabled],
.product-form__variants .soldout {
background-color: #f5f5f5;
color: #999;
border: 2px dashed #ccc;
cursor: not-allowed;
}
/* Hover state */
.product-form__variants button[disabled]:hover,
.product-form__variants .soldout:hover {
background-color: #eaeaea;
color: #666;
border: 2px dashed #aaa;
}
You might need to adjust the class names depending on your theme. A quick way is to right-click the out-of-stock button in your browser → Inspect → check the class applied, and then use that in your CSS.
This way, the out-of-stock button will have its own distinct look in both default and hover states without affecting the in-stock ones.
@ambullseye can you please share this page link?
Simplest is to lower opacity of these buttons:
.variant-option__button-label:has([data-option-available=false]) {
opacity: 0.5;
border-style: dashed; /* can also make border dashed. or whatever... */
}
Hi Everyone,
After testing the above. I isolate this element in variant-main-picker-liquid.
}
.variant-option__button-label:has([data-option-available=‘false’]):has(:checked) {
--variant-picker-stroke-color:rgb(var(–color-variant-text-rgb) / var(–opacity-60));
background-color: inherit;
border-color: var(–color-selected-variant-border) / var(–opacity-60) ;
}
and changed it to:
}
.variant-option__button-label:has([data-option-available=‘false’]):has(:checked) {
--variant-picker-stroke-color: #f70202;
background-color: inherit;
color: rgb(var(–color-variant-text-rgb) / var(–opacity-100));
border-color: #f70202;
}
This is the result. Cursor is disable with ‘false’, so no hover action. I will probably continue to adjust it a bit. Thank you for all of your help!!!
As a note for those seeking answers in the future. I am using the HORIZON theme. I should have mentioned that at the beginning!
