How to Change "add to cart" button on Product Block for Sold Out Product

I use product blocks throughout my art website. I don't like the individual product pages as each product typically has other products that specifically pertain to it and so it was just easier to use blocks.

However, at the moment, even if an item is sold, it's "add to cart" button still says "purchase" until you click the button and then it says sold out. Is there a css code for the button to just automatically be replaced with "SOLD OUT" if the item quantity falls to zero?

Included is a test webpage. 

**UPDATE**

https://www.pashapashanewyork.com/new-page-2

Actually if I could get a little bit of help again, it looks like the "SOLD OUT" only replaces the button when I feature the product image as well? As seen on the page above, both products are actually sold out however the product block where only the button is shown still says "Add to Cart". Is there a way for this code to work also when there is just the button without the product image?

https://www.pashapashanewyork.com/new-page-2

Thank you! Appreciate this!!

On 9/13/2023 at 3:55 PM, Web_Solutions said:

 Add the code below on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.product-block:has(.sold-out) {
  .sqs-add-to-cart-button {
    background: #000;
    .sqs-add-to-cart-button-inner {
      display: none;
    }
  }
  .sqs-add-to-cart-button:after {
    content: "SOLD OUT";
    color: #fff;
  }
}

 

Actually if I could get a little bit of help again, it looks like the "SOLD OUT" only replaces the button when I feature the product image as well? As seen on the page above, both products are actually sold out however the product block where only the button is shown still says "Add to Cart". Is there a way for this code to work also when there is just the button without the product image?

https://www.pashapashanewyork.com/new-page-2

Hi,

Can you share link to a page without image? We can check easier

https://www.pashapashanewyork.com/new-page-2

On 10/18/2023 at 10:59 PM, pashapasha1570048753 said:

https://www.pashapashanewyork.com/new-page-2

I see you figured it out how to change it to Sold out?

On 10/21/2023 at 7:30 AM, tuanphan said:

I see you figured it out how to change it to Sold out?

It looks like the "SOLD OUT" only replaces the button when I feature the product image as well? As seen on the page above, both products are actually sold out however the product block where only the button is shown still says "Add to Cart". Is there a way for this code to work also when there is just the button without the product image?

On 10/26/2023 at 1:03 AM, pashapasha1570048753 said:

It looks like the "SOLD OUT" only replaces the button when I feature the product image as well? As seen on the page above, both products are actually sold out however the product block where only the button is shown still says "Add to Cart". Is there a way for this code to work also when there is just the button without the product image?

You mean change this to Sold out?

You can add this to Website Tools (under Not Linked) > Custom CSS
 

div#block-yui_3_17_2_1_1695745135102_2127 {
.sqs-add-to-cart-button-inner {
    font-size: 0;
}
.sqs-add-to-cart-button-inner:before {
    content: "Sold Out";
    font-size: 14px;
    white-space: nowrap;
    position: relative;
    top: 2px;
}}