Hide "Sold out" badge from main product page only.

Hi! Does anyone know how I can hide the Sold Out badge from the main product page only? I still want to keep it on my individual product pages, but remove it from the main product page. I'm using Squarespace 7.1

Hi. Can you share link to main product page?

On 3/22/2021 at 10:42 AM, tuanphan said:

Hi. Can you share link to main product page?

@tuanphan truemedical.sg/digital-pharmacy

2 hours ago, tuanphan said:

Add to Design > Custom CSS

/* List page - hide sold out */
body.view-list .product-mark.sold-out {
    display: none;
}

 

@tuanphan perfect, thank you 😊

Hi there @tuanphan – thank you for this. I'd so appreciate your help.

What about the opposite problem – remove 'sold out' from individual product page? I'd either like it removed, or preferably changed to Coming soon.

I was also wanting to change the copy on the waitlist for this one item only (not universally across the site). I'd like it to say 

Be notified when this dress goes on sale.

JOIN THE WAITLIST

The website is www.dotandmila.com

and this product page is https://dotandmila.com/shop-1/p/amelia-celebration-dress

(This is a new product that I'm trying to build interest in before launching, NOT a sold out item. I have removed the variants so the waitlist form displays.)

Thanks so much!

Alice

22 hours ago, AliceGage said:

Hi there @tuanphan – thank you for this. I'd so appreciate your help.

What about the opposite problem – remove 'sold out' from individual product page? I'd either like it removed, or preferably changed to Coming soon.

I was also wanting to change the copy on the waitlist for this one item only (not universally across the site). I'd like it to say 

Be notified when this dress goes on sale.

JOIN THE WAITLIST

The website is www.dotandmila.com

and this product page is https://dotandmila.com/shop-1/p/amelia-celebration-dress

(This is a new product that I'm trying to build interest in before launching, NOT a sold out item. I have removed the variants so the waitlist form displays.)

Thanks so much!

Alice

 

 

 

 

 

Add to Design > Custom CSS

.product-mark.sold-out {
    font-size: 0;
}
.product-mark.sold-out:before {
    content: "Coming soon";
    font-size: 18px;
}
span.product-restock-cta {
    font-size: 0 !important;
}
span.product-restock-cta:before {
    content: "Be notified when this dress goes on sale";
    font-size: 20px;
}

This works perfectly on the product page that is coming soon, but it has changed every sold out item to coming soon. So it is only the 'Amelia celebration dress' that is coming soon – the other ones are gone. 

Thanks again for your help, I appreciate it so much!

Best,

Alice

On 8/22/2022 at 8:44 AM, AliceGage said:

This works perfectly on the product page that is coming soon, but it has changed every sold out item to coming soon. So it is only the 'Amelia celebration dress' that is coming soon – the other ones are gone. 

Thanks again for your help, I appreciate it so much!

Best,

Alice

 

You mean do this for some specific products, not all sold out?

If yes, can you add tag: coming-soon for some products, then share link to a product? I will try test some code

1 hour ago, tuanphan said:

You mean do this for some specific products, not all sold out?

If yes, can you add tag: coming-soon for some products, then share link to a product? I will try test some Ycode

Yes that's right, specific products.

My mistake – I made a category, not a tag. I've fixed that now.

The urls are: https://dotandmila.com/shop-1/p/ettie-gingham-dress and https://dotandmila.com/shop-1/p/amelia-celebration-dress

I need code that I can use for other products in the future without having to bother you again – is that possible?

Thank you again!