I’m using Debut, and I’ve been messing around with trying to figure out how to change the color of just my sold out variants in the drop down. I know I can hide and/or disable sold out variants, and I liked having the sold out variants greyed out when they are disabled. But since I have some products that are different prices depending on the variant it would be nice to still have those as clickable options to view the price differences while still greyed out.
Thanks in advance!
Hello, @Kelseidoscope
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thank you @KetanKumar !
This is my website. Password is vofeuxxxx.
This listing specifically I get a ton of questions about pricing on my current squarespace website that I’m migrating to this platform. Since I only have a limited amount of slots available every month, they’re almost always sold out. So I’d like the options in the drop down to be grey, but still clickable so you can see the pricing differences. Thank you so much!!
Thanks for you mean change button color so please add this,
.btn[disabled], .shopify-payment-button [disabled].shopify-payment-button__button--unbranded, .btn[aria-disabled], .shopify-payment-button [aria-disabled].shopify-payment-button__button--unbranded {
cursor: default;
opacity: 0.5;
background: #000;
color: #ddd;
border-color: #000;
}
The button being greyed out is a nice feature too, but I’d like the drop down variants that are sold out to appear grey like in the screenshot above, but still be clickable so that you can view the price differences.
I used this code under theme.js to get the items to be greyed out, but I can’t figure out how to keep the options enabled at the same time. Thanks again, hopefully that makes more sense!
document.addEventListener('DOMContentLoaded', () => {
const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace("ProductJson-", "shopify-section-");
const productVariants = JSON.parse(product.innerHTML);
const unavailableVariants = [];
productVariants.variants.forEach((variant) => {
if (variant.available === false) {
unavailableVariants.push(variant);
}
});
const variantOptions = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector option')]
const observer = new MutationObserver((mutation) => {
unavailableVariants.forEach((item) => {
variantOptions.forEach((option) => {
if (option.value === item.title) option.setAttribute('disabled', '');
});
});
observer.disconnect();
});
if (unavailableVariants.length > 0 && productVariants.options.length === 1) {
const addToCartForm = document.querySelector('form[ action="/cart/add"]');
if (window.MutationObserver && addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
const config = { childList: true, subtree: true };
observer.observe(addToCartForm, config);
}
}
});
}
});
Using the D2 theme on Shopify and currently the theme files are as follows;
Anyone can let me know how to grey out sold out items while keeping them clickable, and to which .liquid or .js or .css file should the code be placed in?
Also this is not for dropdown but for the box like variations selectors for size
