I couldn’t find a proper solution on the forums so I came up with some of this myself. I’ve been using it on a fairly large site for about a year now and it works great. Unsure why something like this isn’t already implemented into the theme (really wish Theme.co would add more features for WooCommerce.)
Use this custom CSS to get a SOLD OUT icon to appear on out of stock products in the WooCommerce product archive:
.woocommerce li.product.outofstock {
position: relative;
}
.woocommerce li.product.outofstock .onsale {
display: none;
}
.woocommerce li.product.outofstock .entry-featured::before {
padding-top: 9px;
content: 'SOLD OUT';
font-style: normal;
font-weight: 400;
font-family: Helvetica,Arial,sans-serif;
list-style: none;
box-sizing: border-box;
position: absolute;
display: block;
width: 42px;
height: 42px;
font-size: 11px;
letter-spacing: 0;
line-height: 13px;
text-align: center;
border-radius: 100%;
z-index: 1;
transform: rotate(-10deg);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.45);
background-color: tomato;
text-shadow: none;
color: #000;
top: 6px;
left: 6px;
}