Change Sold Out button position and format in 7.1

Site URL: http://www.amovintage.com

Hi,

I would like to change my shop page so that instead of the SOLD OUT product information showing underneath the price on the products page, it shows up over the image instead as a sticker. I have seen loads of squarespace websites with this and tried to find the answers on here as well as google but cant find it anywhere. If anyone knows I would appreciate it so much, feel like I'm missing something really simple!

Have attached an image of mine v example of what I would like it to look like, I dont mind if the new one is a square or a circle or positioned in the top or bottom corner, just think it looks much more professional then how it currently sits.

Thank you!!!

Add this to Last Line in Design > Custom CSS

/* Sold out */
.view-list .product-mark.sold-out {
    position: static !important;
    background: transparent !important;
    color: black !important;
    text-align: center !important;
    transform: unset !important;
    top: unset !important;
    right: unset !important;
    width: 100%;
}

Thank you!

Site URL: https://www.pixelpaperhearts.com/shop-pph/key-tags

Hi there, I tried to use the code above, but doesn't look like it worked?

Any suggestions?

Thank you so much!

8 hours ago, heypixelpaper said:

Site URL: https://www.pixelpaperhearts.com/shop-pph/key-tags

Hi there, I tried to use the code above, but doesn't look like it worked?

Any suggestions?

Thank you so much!

 

It looks like you solved?

1 hour ago, tuanphan said:

It looks like you solved?

I figured a bit out last night. thanks for asking!

is there something I can add to the code to make it circle vs. square? 

18 hours ago, heypixelpaper said:

I figured a bit out last night. thanks for asking!

is there something I can add to the code to make it circle vs. square? 

With circle

.view-list .product-mark.sold-out {
    background: #000 !important;
    color: #fff !important;
    font-family: FUTURACUSTOM;
    letter-spacing: 0px;
    line-height: 0px;
    font-size: 16px;
    position: absolute;
    transform: rotate(
-20deg
);
    top: 10px;
    right: 10px;
    display: center;
    padding: 20px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}