When you have a wide selection of items in your store, you would definitely want to highlight some of them, either to highlight the offer attached to them or just to signify some new arrivals or featured products. This article would explore some of the easy ways to make specific products stand out in your store by using badges.
As you know, WooCommerce has a default ‘Sale’ badge which is automatically displayed alongside the product which is ‘on sale’.
Depending on the theme you are using, the ‘Sale’ badge would be displayed differently. Some theme even has options for ‘Sale’ badge customization too. You can check out our article on the same here.
The Sale badge gets automatically added to your products even when you give discounts of any form using our ELEX Dynamic Pricing and Discounts plugin for WooCommerce and ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing.
Want to change the text?
Usually, the default text displayed on the sale tag is ‘Sale’. We receive a number of requests from customers who want to replace the text. Well, that’s easy.
Paste the following code in the function.php file of your activated website theme.
add_filter( 'woocommerce_sale_flash', 'wc_custom_replace_sale_text' );
function wc_custom_replace_sale_text( $html ) {
return str_replace( __( 'Sale!', 'woocommerce' ), __( 'My sale text!', 'woocommerce' ), $html );
}
In place of ‘My sale text!’, add the text you wish to see in place of ‘Sale’.
Want to change the look?
If you are not satisfied with just changing the text and want some more changes, then paste the following code in the style.css file of your activated website theme.
span.onsale {
width: 100px;
height: auto;
background: #58D68D;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin: auto;
text-align: center;
color: white;
}
You can add any of your preferred shapes and change the CSS accordingly.
Want to remove the ‘Sale’ badge completely?
Sometimes you would just want to sell your products at discounted rates without highlighting the fact that they are on Sale. In that case, you can just simply remove the ‘Sale’ badge.
Copy paste the following code in your function.php file.
add_filter(‘woocommerce_sale_flash’, ‘woo_custom_hide_sales_flash’);
function woo_custom_hide_sales_flash()
{
return false;
}
Want to replace the default badge with a custom image?
You can find a good variety of images on the web which you can set as a Sale badge. The advantage of using images is that you can get your desired Sale badge with the least amount of code.
Add the following code snippet at the end of the function.php file.
add_filter('woocommerce_sale_flash', 'my_custom_sales_badge');
function my_custom_sales_badge() {
$img = '<img width="100px" height="100px" src="http://demostore.com/wp-content/uploads/2019/02/Sale-Red-Tag.png"></img>';
return $img;
}
You can replace the image source URL with your image URL in the above code snippet. Below screenshot shows the custom image for Sale badge.
If you wish to clear the badge area, then add the following CSS code in the style.css file.
span.onsale {
background: none;
box-shadow: none;
}
Want to change the position and further customization?
There are plugins available using which can either be used alongside the default ‘Sale’ badge or replace it. By using these plugins, you will get a number of badge options to choose from. You can either choose to give a text badge or an image badge.
For more information on the top plugins for customizing badge, you can refer the section “Further Reading” given below.
On selecting any of the Badges, your ‘On Sale’ products would appear as shown in the screenshot below.
Further Reading
If you are a techie then there’s a lot of cool stuff you can do with the sale badge. This LearnWoo article should help you to explore some more premium options.
Disclaimer
Any change you make in function.php or style.php file shall be wiped out after any plugin and theme update respectively. So, make sure to keep a backup of the code snippet you are using.
References:
Explore our blog section for more articles.
You can also check out WordPress and WooCommerce plugins in ELEX.
