One of the greatest things about WooCommerce is its hook system. With so many actions and filters, you can edit and add custom content almost anywhere. This code snippet will let you filter the normal “Sale” badge with your own custom icon.
<php
add_filter( 'woocommerce_sale_flash', 'my_custom_sales_badge' );
function my_custom_sales_badge() {
$img = '<span class="onsale"><img src="http://yourwebsite.com/wp-content/uploads/2014/11/custom-sales-badge.png" /></span>';
return $img;
}
You’ll also need some CSS to clean up the badge area. This should do the trick but you can add to it as needed.
span.onsale {
background: none;
box-shadow: none;
}
Hello, Thank u so much. the code works well
Hi,
Is it possible to rename this badge and give it a link to custom URL?
thx
Hello. Not sure what you mean by rename but you can add a link to the HTML part of the code.
The CSS doesn’t seem to work for me?
Me either. The function shows my new badge, but I can see the blue circle behind it (the old badge).
Try this for the CSS if the above didn’t seem to work for you:
.woocommerce span.onsale {
background: none;
box-shadow: none;
}
Works well, but the image does not change with the size of the product image. When on shop page image is fine but on single product page the image retains same size even though woo displays larger image. In other words the proportion is different.
Hello. You would have to modify the CSS to adjust for the different templates.
Cannot get an image to show, CSS works as it should. I am using BeTheme and cannot get the custom image to show. Any thoughts?
Thanks for the tip.
Installation of the code into functions.php works fine. However, css does not work. It unnecessarily stretches the custom badge image file throughout the width of the product image. Below is an example from my website;
https://misofis.com/urun-kategori/temizlik-urunleri/kisisel-bakim-urunleri/sampuanlar/
Product image dimensions are 600×600 and badge dimensions are 75×30.
Could you please tell me how to fix it ?
Thanks in advance.