'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 ⬇️
sophiamd57 got a reaction from creedon in Make "sale" product descriptor become a flag on product thumbnail image?
sophiamd57 got a reaction from paul2009 in How to change font, color, size of "Sold Out" text on product page?
