How to Change the Sale badge text in WooCommerce ?

Do you have some items on sale on your e-shop? Great, this is a great way to highlight certain products and to attract more customers. Let’s see the various ways you can use the WooCommerce sales badge in your store to promote your products on sale.

In this article, we will explore the Sales badge, used by default by WooCommerce for products offered with discount. We assume that you already have WordPress and WooCommerce installed, at least one product, and at least one product offered with a discounted price.

Table of contents
Getting ready
Changing the text of the sales badge
Show discount percentage on sales badge
Show discount amount on sales badge
Completely remove sales badge
Use a plugin to manage your badges
Wrapping up

Getting ready

Before doing any code modifications, it’s always a good idea to take a full backup of our site and make sure that we have FTP access or access to cPanel or Plesk or other control panel with access to a file manager.

If you wonder what is the best way to add code snippets to your site, have a look at our previous article about safely adding PHP code.

We assume that you already have WordPress with WooCommerce installed, and your store is displaying at least one product.

Changing the text of the sales badge

By default, when a product is discounted, WooCommerce displays a badge with the simple text “Sale”. Let’s say you want to change/rename the text to something like “Huge Discount”. All you need to do is to add this code snippet:

function my_custom_sales_badge_text($text, $post, $_product) {
  return 'Huge Discount';
}

add_filter( 'woocommerce_sale_flash', 'my_custom_sales_badge_text', 10, 3);

And here is the result:

Show discount percentage on sales badge

If you are having a particularly important sale, with a big discount and you want your customers to notice it, a great way would be to show the discount percentage on the sales badge. Here is how to do it:

function my_custom_discount_percentage_sale_badge( $html, $post, $product ) {
  if( $product->is_type('variable')){
    $percentages = array();

    $prices = $product->get_variation_prices();

    foreach( $prices['price'] as $key => $price ){
      if( $prices['regular_price'][$key] !== $price ){
        $percentages[] = round(100 - ($prices['sale_price'][$key] / $prices['regular_price'][$key] * 100));
      }
    }
    $percentage = "up to " . round(max($percentages)) . '%';
  } else {
    $regular_price = (float) $product->get_regular_price();
    $sale_price    = (float) $product->get_sale_price();

    $percentage    = round(100 - ($sale_price / $regular_price * 100)) . '%';
  }
  return '' . esc_html__( 'SALE', 'woocommerce' ) . ' ' . $percentage . '';
}

add_filter( 'woocommerce_sale_flash', 'my_custom_discount_percentage_sale_badge', 20, 3 );

Here is the result:

This code snippet works both with single products, as well as with variable products. In the case of variable products, if each product variation has a different discount applied, the code above calculates and displays the maximum discount percentage.

In the screenshot below, we see the result of this code snippet on a variable product with different discounts per variation:

Show discount amount on sales badge

What if instead of the discount percentage you want to display the discount amount on the sales badge? For example “SALE -$20”?

To achieve this, we will use the following snippet:

function my_custom_discount_amount_sale_badge( $html, $post, $product ) {
  if( $product->is_type('variable')){
    $amount_off = array();

    $prices = $product->get_variation_prices();

    foreach( $prices['price'] as $key => $price ){
      if( $prices['regular_price'][$key] !== $price ){
        $amount_off[] = $prices['regular_price'][$key] - $prices['sale_price'][$key];
      }
    }
    $amount_off_s = "up to -$" . round(max($amount_off));
  } else {
    $regular_price = (float) $product->get_regular_price();
    $sale_price    = (float) $product->get_sale_price();

    $amount_off_s = "-$" . ($regular_price - $sale_price);
  }
  return '' . esc_html__( 'SALE', 'woocommerce' ) . ' ' . $amount_off_s . '';
}

add_filter( 'woocommerce_sale_flash', 'my_custom_discount_amount_sale_badge', 20, 3 );

Just like the previous snippet, this one works too for both single and variable products. Here is the discount amount on a single product:

In a variable product with different discounts per variation, the snippet will show the biggest discount:

Completely remove sales badge

The “Sale” badge is a great way to highlight the fact that your product is offered in a special, discounted price. However, some might say it is a bit redundant, especially as most themes show both the regular price and the discounted price anyway.

If you wish to remove completely the “Sales” badge from all products on sale, here is the code snippet that will help you achieve this:

function my_hide_sales_badge() {
  return false;
}

add_filter('woocommerce_sale_flash', 'my_hide_sales_badge');

This snippet will hide the sales badge from everywhere in your shop, including the shop page, archive pages and every single product page.

Use a plugin to manage your badges

If you are looking for an easier way to change badges, without messing with the code and with some additional options, such as change badge color, and more, then you might find useful the YITH WooCommerce Badge Management plugin.

Upon installing the plugin, you will see two new items on the left-side menu of your dashboard, “Badges” and “YITH“. Let’s create a new smart sales badge by going to Badges > Add Badges and test it out:

Here I created a new text badge with the text “40%” and green color. Let’s apply it to one of our products. Go to the product edit screen. On the right side, below the “Product categories” and “Product tags” panels, you will see a new panel named “Product Badge“.

Select your newly created badge from the drop-down menu and save. Now let’s see the result in the product page:

If you want even more customizations, feel free to explore the other options given by the plugin. As an example, here I added another badge, that highlights a product with 50% discount:

Here is the result:

Wrapping up

In this article, we explored several ways to highlight products on sale on our e-shop.

We examined how to:

1. Change the default text (“SALE”) on the sale badge that WooCommerce displays on products with discounted price.
2. Make the badge text more informative, by adding the percentage discount on the sales badge, for both simple and variable products
3. Instead of the discount percentage, show the exact amount of money saved up in each product.
4. Completely remove/change/rename the sales badge from our e-shop.
5. Use the YITH WooCommerce Badge Management plugin to further customize our sale badges.

We hope this article was informative. Don’t forget to leave a comment and let us know if any of these solutions worked for you!