Jump to content

Changing 'sold out' to 'coming soon' for particular items

Recommended Posts

  • Replies 16
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

I checked the Cherimoya product, but couldn't see any categories. Have you added the coming soon category?

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Add to Design > Custom CSS

/* Sale out to Coming Soon */
.product-mark.sold-out {
    visibility: hidden;
}
.product-mark.sold-out:before {
    visibility: visible;
    content: "Coming Soon";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

 

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
  • 3 months later...
On 10/17/2021 at 8:16 PM, tuanphan said:

Add to Design > Custom CSS

/* Sale out to Coming Soon */
.product-mark.sold-out {
    visibility: hidden;
}
.product-mark.sold-out:before {
    visibility: visible;
    content: "Coming Soon";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

 

 

How do I change the label of a single product's thumbnail on my shop page? I'd like to change the Veggie CSA's thumbnail to say coming soon, but I don't want to create a different category for it.

Screen Shot 2022-01-19 at 3.45.59 PM.png

Link to comment
On 1/20/2022 at 3:49 AM, SSong said:

 

How do I change the label of a single product's thumbnail on my shop page? I'd like to change the Veggie CSA's thumbnail to say coming soon, but I don't want to create a different category for it.

Screen Shot 2022-01-19 at 3.45.59 PM.png

Change circle sold out to coming soon for Vegetable csa product only?

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
12 hours ago, tuanphan said:

Change circle sold out to coming soon for Vegetable csa product only?

Yes, plus the sold out labels in the related product section as well, which I almost figured out. The only thing I managed to figure out is replacing the "sold out" text in the product description. I'm having a hard time finding exactly how to target a specific product thumbnail on the shop page. 

I know "Coming Soon" is not gonna fit in that same circle, so the background could just be a rectangle in a different color so it's more obvious.

Thank you Tuan!!

Link to comment
21 hours ago, SSong said:

Yes, plus the sold out labels in the related product section as well, which I almost figured out. The only thing I managed to figure out is replacing the "sold out" text in the product description. I'm having a hard time finding exactly how to target a specific product thumbnail on the shop page. 

I know "Coming Soon" is not gonna fit in that same circle, so the background could just be a rectangle in a different color so it's more obvious.

Thank you Tuan!!

Add to Page Header

<style>
.view-list .product-mark.sold-out {
    font-size: 0;
}
.view-list .product-mark.sold-out:before {
    content: "Coming soon";
    font-size: 10px;
    background-color: black !important;
    display: block;
    color: white;
    width: 80px;
    right: 10px;
    position: absolute;
    top: 10px;
    line-height: 20px;
}
</style>

 

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/22/2022 at 7:19 AM, tuanphan said:

Add to Page Header

<style>
.view-list .product-mark.sold-out {
    font-size: 0;
}
.view-list .product-mark.sold-out:before {
    content: "Coming soon";
    font-size: 10px;
    background-color: black !important;
    display: block;
    color: white;
    width: 80px;
    right: 10px;
    position: absolute;
    top: 10px;
    line-height: 20px;
}
</style>

 

Thank you! But how do I target just 1 or 2 products? @tuanphan

Link to comment
On 1/28/2022 at 3:00 AM, SSong said:

Sorry about the confusion. I thought we'd launch these listings next week, so just the Microgreens listing please.

Regardless, I would still like to learn how to change the labels of multiple products, so I know how to do this in the future.

Thank you!

Add tag: coming-soon for these products, then add this new code

<style>
.tag-coming-soon .product-mark.sold-out {
    font-size: 0;
}
.tag-coming-soon .product-mark.sold-out:before {
    content: "Coming soon";
    font-size: 10px;
    background-color: black !important;
    display: block;
    color: white;
    width: 80px;
    right: 10px;
    position: absolute;
    top: 10px;
    line-height: 20px;
}
</style>

 

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
  • 2 months later...

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.