Jump to content

Change Sold Out button position and format in 7.1

Recommended Posts

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

Screenshot 2021-02-25 at 13.47.18.png

Screenshot 2021-02-25 at 14.00.35.png

Screenshot 2021-02-25 at 14.03.01.png

Link to comment
  • Replies 6
  • Views 1.5k
  • Created
  • Last Reply

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

 

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
  • 1 month later...
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?

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

 

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
  • Susana_SQSP changed the title to Change Sold Out button position and format in 7.1

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.