How to Easily Remove Sale Badge on your WooCommerce Store? (with Video)

Remove WooCommerce Sale Badge | LearnWoo Blog Banner

Last updated - February 24, 2020

When you offer discounts on your WooCommerce store, the Sale badge gets automatically added to the product(s). While this may attract your potential customers’ attention to the product, there may be instances when you want to offer the discounted product straight away without attracting the user’s attention. 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, and so on.

In this article, we will see how to easily remove the sale badge on your WooCommerce store. We will also look into ways to customize the sale badge.

Removing WooCommerce Sale Badge

You can remove the WooCommerce sale badge in two simple ways:

  1. Code Snippet
  2. 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.

Remove WooCommerce Sale Badge | Default Shop Page View with Sale Badge
Default Shop Page View with Sale Badge

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.

Remove WooCommerce Sale Badge | Sale Badge Removed in the Shop Page
Sale Badge Removed in the Shop Page

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.

Remove WooCommerce Sale Badge | WordPress Additional CSS Setting
WordPress Additional CSS Setting

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.

Remove WooCommerce Sale Badge | Additional CSS added
Additional CSS added

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 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.

Remove WooCommerce Sale Badge | Sale Badge Text Changed
Sale Badge Text Changed

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.

Remove WooCommerce Sale Badge | Image added for Sale Badge
Image added for Sale Badge

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:

  1. 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.
  2. 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.
  3. Woo Badge Manager – You can create attractive designs using text, images, and icons. It also has a sales countdown timer, the expiry date of the badge, and has over 60 badge designs to spoil you with lots of options.
  4. 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.
  5. 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.
  6. 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.

Conclusion

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 BasicsWordPress Security & Performance, or WooCommerce customizations for learning about different aspects of WordPress and WooCommerce.

Or continue exploring LearnWoo for more amazing articles.

LEAVE A REPLY

Please enter your comment!
Please enter your name here