Sold Out badge in 7.1 similar to 7.0

Site URL: https://jenniferhillhouse2.squarespace.com/

Hi I'm upgrading my site from 7.0 to 7.1 and I'm trying to recreate the circle "Sold-Out" Status badge as a circle in the top right hand corner. Would anyone be able to help out with some code for how to do this? I've been searching around and it's sending me nuts.  Would love this to work in every instance the product is seen on the website. 

https://jenniferhillhouse2.squarespace.com/shop-now is the new site 

https://jenniferhillhouse.squarespace.com/pottery-products is the old site with how I would prefer the SOLD OUT status to look.

The code I have in there at the moment is seriously messed up I think. 

.product-mark.sold-out {
    background: #d97878 !important;
    color: white !important;
 font-family: URW-DIN-condensed;
   letter-spacing: 2px;
  font-weight: 400;
}

Add this to Custom CSS

.product-mark.sold-out {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    padding: 20px;
}

Thanks so much!!! It's almost working @tuanphan!!

The only thing Sold out doesn't appear in Quick View... and is also way off to right in the detailed product description... Is there a way to fix there so it's in the top right hand corner in all instances?

Also - is there a way of making it a circle? 

Thanks so much for your help! 

Hey! Did you find a solution for the code when opening up the product page? im having the same issue and would love to know 🙂 @jenniferhillhouse @tuanphan

On 12/3/2020 at 5:17 AM, HalcyonDazeStore said:

Hey! Did you find a solution for the code when opening up the product page? im having the same issue and would love to know 🙂 @jenniferhillhouse @tuanphan

Can you share site url? We can check easier

10 hours ago, tuanphan said:

Can you share site url? We can check easier

we have our site hidden with a coming soon page as our web address is on our social media.

 have duplicated the site but how do i share without subscribing? thanks

On 12/5/2020 at 1:38 AM, HalcyonDazeStore said:

we have our site hidden with a coming soon page as our web address is on our social media.

 have duplicated the site but how do i share without subscribing? thanks

Hi. You can setup password & share url

On 9/13/2020 at 3:16 PM, tuanphan said:

Add this to Custom CSS

.product-mark.sold-out {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    padding: 20px;
}

 

Hi @tuanphan 

Your code works perfectly on the Shop collection page (see first screenshot), but it also affects the Sold Out text on the product page itself which means its overlaying the text (see second screenshot). 

Any idea how to make this code only apply the Sold Out text on the collection page? Alternatively, I'd settle for hiding the Sold Out text on the product page?

I hope you can help. 🤞

Luke

On 1/18/2021 at 1:39 PM, lgwebdesign said:

Hi @tuanphan 

Your code works perfectly on the Shop collection page (see first screenshot), but it also affects the Sold Out text on the product page itself which means its overlaying the text (see second screenshot). 

Any idea how to make this code only apply the Sold Out text on the collection page? Alternatively, I'd settle for hiding the Sold Out text on the product page?

I hope you can help. 🤞

Luke

Use this new code

.view-list .product-mark.sold-out {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    padding: 20px;
}