Changing color of only sold out variants

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

Replies 7 (7)

KetanKumar
Shopify Partner
36839 3635 11972

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kelseidoscope
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!!

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kelseidoscope
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);
        }
      }
    });
  }
});

 

 

Hi9
New Member
4 0 0

Using the D2 theme on Shopify and currently the theme files are as follows;

Hi9_0-1654421549247.png

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?

Hi9
New Member
4 0 0

Realized earlier image wasn't too clear try this one;

Hi9_1-1654421703797.png

 

Hi9
New Member
4 0 0

Also this is not for dropdown but for the box like variations selectors for size