Jump to content

Changing SOLD OUT label to COMING SOON

Go to solution Solved by paul2009,

Recommended Posts

  • Solution

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.

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 2 weeks later...

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;
 } 
Link to comment

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 10 months later...

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? 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 month later...
  • 2 weeks later...
  • 3 weeks later...
On 2/21/2020 at 3:36 AM, paul2009 said:

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!

Link to comment
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?

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
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

Link to comment
  • 1 month later...
  • 3 months later...
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. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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 

Link to comment
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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 4 months later...
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?

Link to comment
  • 2 years later...

Hi Paul, 

I too, would love to know if you have an update on this code for 7.1.

The site I am creating is for Real Estate properties (being created as "Services" Products). I want to utilise the "sold out" badge when a property is successfully transacted, however I require two different Labels dependent on the category; being cat-For-Sale = "SOLD", or cat-For-Lease = "LEASED".

So your code for 7.0 should be absolutely perfect for what I am trying to achieve, however I am using 7.1. I applied your code anyway, but to no avail. I'd love it if you can help me out.

On 8/28/2021 at 8:27 AM, joshcohen said:

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!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.