When a customer comes to your site, they should immediately understand whether you are promoting a sale or not. Only if they get the gist firsthand, they will further move to browsing your e-commerce store for the sale prices. To get that attention right off the bat, a relevant tag right next to the product will do the job and such tags are WooCommerce Sale Badges.
Some store owners would also want to customize the sale badge based on their requirements. They can customize the badge to make it more attractive, change text & color, etc.
In this article, we will learn how to easily remove the sale badge from your WooCommerce store and explore ways to customize it.
What is a WooCommerce Sale Badge?
When an item is on sale, you would want your customers to notice that, and for that, we need a WooCommerce Badge. A WooCommerce Sale Badge is a visual label that is added to the products that are on sale or discount. This badge usually will have the text “Sale”. This is mainly used for bringing in the visibility of the products.
Why do ecommerce storeowners remove or customize WooCommerce Sale Badge?
Let’s get down to the different reasons why removing or customizing WooCommerce Sale Badge is done by storeowners:
- Aesthetic Need: WooCommerce sale badges might affect the overall outlook of the website. So having the option of removing or customizing the WooCommerce sale badge can help match the design of your ecommerce store.
- Customization: Sometimes the requirement of the badge may not just fit into “Sale”. Therefore, the need arises to either remove the WooCommerce sale badge or subtly customize the tag into some other text.
- Confuses Customers: Constant display of the sale badge can confuse the customer and they might not be able to differentiate between sale price and regular price.
How to Remove WooCommerce Sale Badge?
You can remove the WooCommerce sale badge in two simple ways:
- Code Snippet
- CSS
The above-listed methods may be overridden by some themes. Hence, you can test and use the desired method yourself.
1. Using Code Snippet
Below is a screenshot showing the sale badges for products on the shop page, by default.
Add the below code snippet in the functions.php file of your activated website theme. The code snippet is applicable for both the shop page as well as individual product pages.
add_filter('woocommerce_sale_flash', 'lw_hide_sale_flash');
function lw_hide_sale_flash()
{
return false;
}
Tip: Read our blog article to know how to update a code snippet to the functions.php file.
The below screenshot shows the shop page without WooCommerce sale badges. You can notice the sale price is still applied.
2. Using CSS
You can add the CSS snippet using the WordPress Customizer. Open the Customizer and click Additional CSS, as shown in the screenshot below. You can also notice the sale badges visible for the products.
Add the below snippet to the site.
.woocommerce span.onsale{
display:none;
}
WordPress will preview the updated changes. The sale badge will now be hidden from the shop and product pages. You can click on the Publish button to save the changes. The below screenshot shows how the CSS should be added and the updated change. i.e, Sale badge removed.
Customizing the WooCommerce Sale Badge
Instead of removing the Sale badge completely, you can choose to customize it. You can change the text, color, position, add image, schedule it, automate it, and do much more. We will look into some of the customizations that you can do with code snippets as well as plugins.
1. Using Code Snippets
We will look at some basic code snippets that help you customize the sale badge in different ways.
1) Changing the WooCommerce Sale Badge Text
Let us change the Sale badge text from the default “Sale” to “Offer Discount”. To do this, add the below code snippet in the functions.php file of your activated website theme.
add_filter( 'woocommerce_sale_flash', 'lw_replace_sale_text' );
function lw_replace_sale_text( $html ) {
return str_replace( __( 'Sale!', 'woocommerce' ), __( 'Offer Discount', 'woocommerce' ), $html );
}
In the above code snippet, you can replace the text ‘Offer Discount’ with the desired text.
The below screenshot shows how the updated sale badge text is shown.
2) Replacing the Sale badge text with an Image
You can add an image instead of the default text. Again, you need to add the below code snippet to the functions.php file of your activated website theme.
add_filter('woocommerce_sale_flash', 'lw_custom_sales_badge');
function lw_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;
}
When you use the above code snippet, don’t forget to replace the URL value in the src attribute of the <img> tag.
The below screenshot shows the custom image added instead of the sale badge. You should note that the position of the image might differ in other themes.
2. Using Plugins
There are several plugins in the market, that do more than just changing text and color of the WooCommerce sale badge. The plugins give you more control and allow you to customize different aspects of the sale badge.
Some of the Top WooCommerce Badge Management Plugins are:
- YITH Badge Management Plugin – This plugin allows you to customize the text, color, design, and position. The plugin also has an automatic assignment of badges based on categories, pre-defined badge designs, and easy management of all the badges.
- WooCommerce Advanced Product Labels – You can apply badges on an individual as well as a set of products. It will also calculate the percentage discount and show the discounted amount in the badge. There are several conditions like product type, sale price, stock quantity, etc, using which you can set up the labels.
- Badge and Product Label for WooCommerce – You can create custom labels, add 15 CSS labels, there are pre-designed CSS label templates, add pages for “In-Stock or Out-of-Stock”, customize label attributes, etc.
- WooCommerce Products Badge Management – You can set up badges for individual products, categories, or a generic badge for all the products. It has many in-built badges to choose from, allows you to position the badge, control the opacity, padding, and radius of the badge.
- WordPress WooCommerce Badge Manager Plugin – Set up badges for individual products as well as based on product categories. It will also automatically assign a ‘New’ badge for all the new products of your store.
- Badge Management for WooCommerce – This plugin too helps in customizing the text, color, and position of the badge. You can create sets and also assign badges for product categories. You can use the in-built images or upload your custom image. It also allows you to set a validity period, change padding, background color, or even hide the Sale badge of WooCommerce.
To understand more features of each of the above plugins, read our blog article. P.S., we have also discussed some of the best practices for using Product badges in the article. Don’t miss out!
If you prefer understanding using a video tutorial, watch the video below.
You can also watch the video to check out the top badge management plugins. Some of the plugins might be added or removed from the above list of plugins, in the video.
Final Wrap
Sale badges are a great way to attract customer attention and boost sales on your WooCommerce store. While it may work well for some store owners, some might consider it unnecessary. We discussed ways to remove the WooCommerce sale badge using a code snippet and CSS. And also discussed ways to customize the sale badges in the form of a code snippet and plugins.
Some code snippets get override by themes. Hence, it is better to test and use them. Although, we have tested all the code snippets and they work well with our theme. If you are looking for more customization, there are always plugins!
You can check out blog articles on WordPress Basics, WordPress Security & Performance, or WooCommerce customizations for learning about different aspects of WordPress and WooCommerce.
Or continue exploring LearnWoo for more amazing articles.
FAQs
- How do I hide the sale badge on product pages only?
You can hide the sale badge using PHP or CSS for that section. Use targeted CSS selectors or modify WooCommerce templates.
- Can I disable the WooCommerce sale badge on the product without code?
Yes, you can use the WooCommerce sale badge plugins to disable the WooCommerce sale badge without code.
- How to remove the sale badge for a specific product?
You can remove the badge for individual products using CSS classes or using functions.php.
- Does removing the sale badge affect store performance?
Removal of the sale badge will bring down the visibility of the store and they no longer understand what is for sale and what is not.
