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

'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  ⬇️