Add To Cart button for sold out products

Solved
Tourist
16 0 1

Hello,

How would I change the CSS for the add to cart button, that affects only products that are sold out?
I just want to have it greyed out if the product is sold out and doesn't allow purchasing (this is important, as most of my products are pre-orders, so I allow purchase when sold out).

0 Likes
Shopify Expert
165 40 66
Hello Blaine,

Please provide us with a url to your store and we can provide you with a working solution!

Thanks,
Shay
Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Tourist
16 0 1

Hey, thank you. An example product on my store:

https://www.killyourgod.net/collections/headwear/products/kyg-sigil-hat-1

 

Looking into it, all I would need to do is change the CSS for disabled buttons, to make things easier.

Nothing I'm trying seems to be working though.

0 Likes

Success.

Shopify Expert
165 40 66

@Blaine,

 

Your theme adds a class named disabled when the product is out of stock. We will target that so it doesn't affect the in-stock products.

 

You can add the following css to your theme by going to Online Store > Themes > Edit Code > Assets > styles.scss.liquid and paste the following code at the bottom of your theme. 

 

.single_add_to_cart_button.ajax_form_cart.button.disabled {
  color: #e6e6e6; 
  background-color: #e6e6e6; 
  border-color: #e6e6e6; 
}

Please let me know if you have any questions. 

 

Thanks,

Shay 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
Tourist
16 0 1

Perfect, thank you so much!

1 Like