Jump to content

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

Recommended Posts

  • Replies 16
  • 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?

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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
21 hours ago, SSong said:

Vegetable and flower CSA, and the microgreens listings

These products?

https://www.fortsferryfarm.com/shop

image.thumb.png.cb09edbeb6dc78670836ec259e6c200a.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 4/24/2022 at 3:36 PM, Elliscreates said:

Also, change 'buy now' label for cart?

Thanks

Screenshot 2022-04-24 at 09.35.36.png

It looks like you removed the tag coming-soon? Just tested code & see nothing here

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.