"Sold Out" Image Overlay

On 11/8/2021 at 7:29 AM, tuanphan said:

Can you share link to page in screenshot? We can help easier

Yes! The URL is theretrocollectiveco.com/shop

On 11/10/2021 at 2:30 AM, Ekat27 said:

Yes! The URL is theretrocollectiveco.com/shop

Hi,

I don't see text in top left of image

17 hours ago, tuanphan said:

Hi,

I don't see text in top left of image

It is highly unnoticeable on desktop version unless you really zoom in..much more noticeable on mobile version if you look there!

On 11/12/2021 at 8:42 AM, Ekat27 said:

It is highly unnoticeable on desktop version unless you really zoom in..much more noticeable on mobile version if you look there!

Donn't remove any code in your current code. Add this to Design > Custom CSS

.post-type-store-item.sold-out .grid-image:after {
    content: "" !important;
}

On 4/12/2021 at 7:13 PM, Beyondspace said:

hope you twist it from here

.post-type-store-item.sold-out .grid-image:before {
  content: 'Sold Out';
  font-weight: bolder;
  color: #fff;
  font-size: 2em;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.post-type-store-item.sold-out .grid-image:after {
  content: 'Sold Out';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2
}
.post-type-store-item.sold-out .product-mark.sold-out {
  display: none;
}

This is exactly what I need! How do I add the Sold Out feature to my site?

You can try adding my code to Home > Design > Custom css

Hi tuanphan! Your expertise has been invaluable to me while working on my website. This is the first hiccup I've run into-- This code works wonderfully on the desktop site, but for some reason once the display resizes to that of a tablet or smaller, the overlay doesn't just cover the grid image, but it seems to want to cover the entire product image/title/price wrapper (which is problematic because of the height:100% value). 

Once you get to a certain display size, the number of columns jumps from three to two, and that's when the issues arise. I'd appreciate any help.

On 12/6/2022 at 6:10 AM, Moonmist4769 said:

Hi tuanphan! Your expertise has been invaluable to me while working on my website. This is the first hiccup I've run into-- This code works wonderfully on the desktop site, but for some reason once the display resizes to that of a tablet or smaller, the overlay doesn't just cover the grid image, but it seems to want to cover the entire product image/title/price wrapper (which is problematic because of the height:100% value). 

Once you get to a certain display size, the number of columns jumps from three to two, and that's when the issues arise. I'd appreciate any help.

Hi,

What is your site url? We can check easier

Hi! I need help with the Sold Out overlay behaving incorrectly in the Related Product section.

This is happening when you land on product pages that are sold out, but the custom code is incorrectly applying the sold out overlay to products in the Related Products section as 'Sold Out'. Please see the link below for a product that has sold out, and scroll down to view the related products section where all items are incorrectly marked as Sold Out. Is there any way to work around this?

https://www.louisejones.com.au/store/p/stellar-blush-cushion

Thank you in advance 🙂

On 4/19/2023 at 10:34 PM, louisefernando said:

Hi! I need help with the Sold Out overlay behaving incorrectly in the Related Product section.

This is happening when you land on product pages that are sold out, but the custom code is incorrectly applying the sold out overlay to products in the Related Products section as 'Sold Out'. Please see the link below for a product that has sold out, and scroll down to view the related products section where all items are incorrectly marked as Sold Out. Is there any way to work around this?

https://www.louisejones.com.au/store/p/stellar-blush-cushion

Thank you in advance 🙂

What should it look like?

On 4/22/2023 at 11:09 AM, tuanphan said:

What should it look like?

Hi Tuan,

Thanks for the reply. The items that are not sold out shouldn't have the Sold Out overlay.

This is only happening when you land on a product page of an item that is sold out so the code seems to be incorrectly labelling all 'Related Products' as sold out. I hope this makes sense.

On 4/19/2023 at 10:34 PM, louisefernando said:

Hi! I need help with the Sold Out overlay behaving incorrectly in the Related Product section.

This is happening when you land on product pages that are sold out, but the custom code is incorrectly applying the sold out overlay to products in the Related Products section as 'Sold Out'. Please see the link below for a product that has sold out, and scroll down to view the related products section where all items are incorrectly marked as Sold Out. Is there any way to work around this?

https://www.louisejones.com.au/store/p/stellar-blush-cushion

Thank you in advance 🙂

Don't remove any code in your current code

Add this to Design > Custom CSS

/* related products sold out overlay */
.ProductItem-relatedProducts .grid-item:not(.sold-out) .grid-image:before {
    display: none;
}

14 hours ago, tuanphan said:

Don't remove any code in your current code

Add this to Design > Custom CSS

/* related products sold out overlay */
.ProductItem-relatedProducts .grid-item:not(.sold-out) .grid-image:before {
    display: none;
}

 

Thank you very much Tuan, this worked perfectly 🙂