Changing SOLD OUT label to COMING SOON

Site URL: https://pelican-chiton-xwy4.squarespace.com/shop/fos-classic

Hello,
I would like to change "SOLD OUT" to "COMING SOON" labels on the YOU MIGHT ALSO LIKE section at the bottom of my Product page. 

https://pelican-chiton-xwy4.squarespace.com/shop/fos-classic (7.1)

Is there any way to do that in the Custom CSS?

Thanks,

Xavier

In the past I have cut and pasted code like that below into the "Page Header Injection Code" for individual pages, but this time it is not working. Any ideas? Am I missing something?

 .ProductItem-relatedProducts .product-mark.sold-out { 
   visibility: hidden;
   font-size:0;
 }
 .ProductItem-relatedProducts .product-mark.sold-out:after {
   visibility: visible;
   content: 'Coming Soon'; 
   font-size: 18px;
 } 

The code I provided is CSS so, rather than Code Injection, it should be added to Design > Custom CSS.

Hi Paul! I just tried to use your code to change one product category from Sold Out to Coming Soon. Unfortunately it did not work. I changed all as per your description and added to the Footer, then saved. The products right now are still shown as Hidden, not sure this is the problem? But I guess not. Any other suggestions why this may be? 

On 1/19/2021 at 1:02 AM, kiwistick said:

Hi Paul! I just tried to use your code to change one product category from Sold Out to Coming Soon. Unfortunately it did not work. I changed all as per your description and added to the Footer, then saved. The products right now are still shown as Hidden, not sure this is the problem? But I guess not. Any other suggestions why this may be? 

Can you share your site url? We can check easier

On 1/18/2021 at 6:02 PM, kiwistick said:

I just tried to use your code to change one product category from Sold Out to Coming Soon.

@kiwistick I sent you a direct message on Monday asking for more information.

Hi  @paul2009

I tried using your code and it did not work. Could you please message me? Thanks

On 2/21/2020 at 3:36 AM, paul2009 said:

See a post I wrote about this here:

https://sf.digital/squarespace-solutions/squarespace-products-changing-sold-out-to-sold-or-something-else

 

Thanks @paul2009 this worked perfectly

On 2/21/2020 at 3:36 AM, paul2009 said:

See a post I wrote about this here:

https://sf.digital/squarespace-solutions/squarespace-products-changing-sold-out-to-sold-or-something-else

 

Hi @paul2009this is probably an embarrassingly obvious question, but if I want to use the code you provided here on more than one tag, do I need to duplicate the entire code and change the tag name or is there a simpler way to do it? Ie. add a comma or something after 'tag-mask' and then add an additional tag.

<script>
var oosCat = 'tag-mask'';
var oosDesc = 'Coming Soon';
var a= ...

Thanks!

16 minutes ago, emily.klein said:

If I want to use the code you provided here on more than one tag, do I need to duplicate the entire code and change the tag name or is there a simpler way to do it?

Hi @emily.klein

The code that I posted is fairly simple and has been written to accept just one tag. You can't add additional tags or duplicate the code.

Can you provide a few more details of what you want to achieve? A working link to the products on the site may also help. For example, do you products with different tags that need the same 'sold' message or do they each need different 'sold' messages per tag?

12 hours ago, paul2009 said:

Hi @emily.klein

The code that I posted is fairly simple and has been written to accept just one tag. You can't add additional tags or duplicate the code.

Can you provide a few more details of what you want to achieve? A working link to the products on the site may also help. For example, do you products with different tags that need the same 'sold' message or do they each need different 'sold' messages per tag?

Hi Paul,

Actually if I just tag all the products that I want to use this code for as "coming soon" (and not have the tags visible on the product pages) that will actually work and will be much simpler! Funny how things are always much clearer in the morning! Sorry to have bothered you. And thanks again for providing the code.

Emily

On 2/20/2020 at 4:36 PM, paul2009 said:

See a post I wrote about this here:

https://sf.digital/squarespace-solutions/squarespace-products-changing-sold-out-to-sold-or-something-else

 

Thank you!  Super easy to implement!

Hi @paul2009 - Have you got similar bit of code for 7.1? As im trying to do the same to create an "In Stock" status circle on the products... Any help would be great!

8 hours ago, joshcohen said:

I’m trying to do the same to create an "In Stock" status circle

Can you explain a little more? An in-stock label would normally be an unnecessary distraction. 

A link to the products page may add context. 

My client is a furniture company where stock is ordered and takes 12 weeks to manufacture and ship. However they have some floor stock they want to promote. Ie. have a label like “ready to ship” etc. so not for every product just certain tagged or categorised products that are ready to ship now. Thanks 

So as I can’t use the “sold out” or “on sale” classes I thought there could be an alternative but of css/js to use to display only when products are tagged etc. like the 7.0 version 

2 hours ago, joshcohen said:

My client is a furniture company where stock is ordered and takes 12 weeks to manufacture and ship. However they have some floor stock they want to promote. Ie. have a label like “ready to ship” etc. so not for every product just certain tagged or categorised products that are ready to ship now.

It will depend on whether custom manufactured products are shown with inventory, or if you set these products to zero and manage orders in another way. If only the 'ready to ship' items are sold online then you can use the built-in Limited Availability Labels feature to show a 'ready to ship' label automatically, without code.

However, if custom manufactured products are sold online too, you'll need some code that can add a label to products with a certain tag. See my solution in this post: Adding a custom status badge to Squarespace Products.

On 2/21/2020 at 5:36 AM, paul2009 said:

See a post I wrote about this here:

https://sf.digital/squarespace-solutions/squarespace-products-changing-sold-out-to-sold-or-something-else

 

Paul.

Thank You

On 2/20/2020 at 10:36 AM, paul2009 said:

See a post I wrote about this here:

https://sf.digital/squarespace-solutions/squarespace-products-changing-sold-out-to-sold-or-something-else

In summary, Go to Commerce > Product Status > Out of Stock. In the panel that opens, change the Sold Out description to your choice of wording.

Hey Paul, This article was exactly what I was looking for until I realized I needed to use multiple tags to correspond to different product status. For example. Products are available in person at a temporary retail location. So one product is at "a" location and another product at 'b" location. 

Is there different code that would allow for this?