Jump to content

How to change font, color, size of "Sold Out" text on product page?

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://crytime.art/shop

Hi there! I would like to customize the "Sold Out" text on my product page screen of my site. The text itself is fine, but I would like to change the font and size, and maybe the color.

I've looked all over my site for customization on this but haven't found any. I may be missing something, but would appreciate some help on this!

My online shop is up and available for viewing if you need to see it. (Here's the specific page I screenshotted and attached to this post.)

Thanks so much.

Sold out for product page.PNG

Link to comment
  • Solution

'Sold Out' product marks appear in various locations, including Summary Blocks, Product List Pages and Product Detail Pages. Each of these may be styled differently.

If you want them to all have the same style, you can add some CSS like this:

.product-mark.sold-out {
  font-size: 14px!important;
  color: #000!important;
  background: #fff!important;
}

The "!important" statement overrides other settings, making them the same.

However, if you want style the product marks differently in different areas of the site, you'll need to be more specific. For example, to change the labels on a Product Detail Page (where only one product is shown) you can use the following instead:

.sold-out .product-details .product-mark.sold-out {
  font-size: 28px;
  color: #ee7cc6;
  font-weight: bold;
}

Summary Blocks would be:

.sqs-block-summary-v2 .summary-product-status .product-mark.sold-out {



}

....and so on.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

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

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.