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

Site URL: http://highnoon.co.nz

Hi Paul

I've tried the code with the instructions that you suggest here (https://sf.digital/squarespace-solutions/squarespace-products-changing-sold-out-to-sold-or-something-else) and still see only the 'sold out' message on both the category page and the individual item listing.  Can you help?

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

Thanks for your reply Paul.  Yes, I created a category called 'coming soon', which you can see on the general shop page, https://www.highnoon.co.nz/shop

pic in the attachment below.. plus from the individual item page, showing category

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%);
}

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.

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.

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

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!!

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>

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

15 hours ago, SSong said:

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

Which product you want to target?

5 hours ago, tuanphan said:

Which product you want to target?

Vegetable and flower CSA, and the microgreens listings

21 hours ago, SSong said:

Vegetable and flower CSA, and the microgreens listings

These products?

https://www.fortsferryfarm.com/shop

7 hours ago, tuanphan said:

These products?

https://www.fortsferryfarm.com/shop

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!

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>

Is there a way to fix this so the text falls within the circle? At the moment for me it's showing the block in a circle (I guess because 'sold' now features for me in a circle overlay of the image).

Thanks in advance!

Also, change 'buy now' label for cart?

Thanks

On 4/24/2022 at 3:36 PM, Elliscreates said:

Also, change 'buy now' label for cart?

Thanks

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