I would like to style my products within woocommerce to have a “Sold Out” badge on the upper left corner just as the products do that are marked as “SALE!”. My site is under a maintenance screen, in private are my login details to see an example of the “for sale” badge on my shop page.
I’ve tried some custom code within the child functions.php and options CSS but I’m not having luck with the position and styling. This is what I’m using right now.
.woocommerce .soldout {
position: absolute;
top: -29px;
left: -63px;
display: block;
width: 150px;
height: 80px;
border: 1px solid #dfdfdf;
border: 1px solid rgba(0,0,0,0.075);
font-size: 18px;
line-height: 120px;
text-align: center;
text-transform: uppercase;
color: #298f5e;
background-color: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 1;
}
//* Do NOT include the opening php tag
//* Add sold out badge on archive pages
add_action( 'woocommerce_before_shop_loop_item_title', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="soldout">Sold out</span>';
}
});
//* Do NOT include the opening php tag
//* Add sold out badge on single product pages
add_action( 'woocommerce_before_single_product_summary', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="soldout">Sold out</span>';
}
});