How to add a custom corner badge on WooCommerce Products

WooCommerce has it's own 'Sale' badge, but sometimes it would be nice to add other badges, such as 'New', or Special Offer'. Thankfully this is quite easiy to achieve with a combination of tags and a little css.

First thing we need to do, is add a new Product Tag - in this case, I've setup a new Tag called 'Special Offer'.

Then, we need to add a little css to the theme (if you're using a purchased template, you will probably want to make a child theme before doing this).

The css adds styling for two locations - firstly the product archive, and then the product page itself. You will notice that the last line includes a link to an image file - you'll need to generate this separately. On lines 13 and 14, the product tag will need to be edited to be the same as the one you have created in the first step. For line 13, this will be the Tag slug, and on line 14, it would be the first word in your Tag title.

li.product::before,
.woocommerce-product-gallery::before {
	width: 76px;
	height: 76px;
	z-index: 10;
	top: -5px !important;
	left: -5px !important;
	opacity: 0.8;
	position: absolute;
	background-size: 100% !important;
}

li.product.product_tag-special-offer::before,
.woocommerce-product-gallery.Special::before { 
   content: ''; 
   background: url('../images/flash-special-offer.png') no-repeat; 
}

You may need to tweak the css a little to get the badge the correct size and position, but the end result will be something like this...