Changing color of only sold out variants

Highlighted
Tourist
3 0 1

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!

Highlighted
Shopify Partner
9559 1200 3356

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 0 1

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!!

0 Likes
Highlighted
Shopify Partner
9559 1200 3356

@Kelseidoscope 

Thanks for you mean change button color so please add this,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 0 1

example.png








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);
        }
      }
    });
  }
});

 

 

0 Likes