Modifying SOLD OUT and SALE labels

Site URL: https://www.judithandrolfe.com/fine-art

Hi,

I need some help trying to figure out some custom CSS. At the moment, the SALE and SOLD labels look identical (white font in black square). I would like to change one of the tags to have a different background color so that the difference is immediately obvious (for eg. changing the SALE background to red) Got to the .product-mark tag, but can't figure out how to change one but not the other.

Thanks in advance for the help.

Hi @judith1570048218,

You can target them individually by their additional classes.

So for example, try adding this code within Design > Custom CSS:

/*This targets any elements with BOTH the .product-mark and .sold-out classes.*/
.product-mark.sold-out{background-color:#A40000!important;}

With this expected result:

Presumably, there'd be a comparable class for products on sale, likely .sale or .on-sale, but I can't find anything currently on sale within your site.

Hope this helps!
-Tyler

@tcp13 Perfect. Exactly what I needed (and easier than I thought, can you tell I know nothing about coding). Thanks Tyler!