How to Remove or Rename Sale Badge WooCommerce Storefront

WooCommerce allows you to offer discounts on the products of your choice. WooCommerce automatically adds a Sale badge to the products.

The intention is to attract the attention of visitors to your store.

Storefront Remove or Rename Sale Badge

However, there are instances when you want to offer a discounted product straight away without attracting the user’s attention. Additionally, you might want to customize the sale badge to make it look attractive.

In this article, I will show you how to remove and rename the sale badge. Moreover, I will share how you can replace the sale badge with an image.

Steps to Completely Remove the Sale Badge from Products in the WooCommerce Storefront Theme

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to remove the sale badge from products.
3. Add the following code to the functions.php file of the Storefront theme.

/**

 *          Remove SALE badge @ Product Archives and Single Product

*/

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

// ---------------

// IN ALTERNATIVE TO REMOVE_ACTIONS:

 add_filter( 'woocommerce_sale_flash', '__return_null' );

4. This is the outcome:
5. Alternatively, you can use CSS to achieve the same result. You can add the CSS snippet using the WordPress Customizer.

.woocommerce span.onsale{

display:none;

}

6. Open the Customizer and click Additional CSS, as shown in the screenshot below:
7. The sale badge will now be hidden from the shop and product pages. You can click on the Publish button to save the changes.

Steps to Rename the Sale Badge on the WooCommerce Storefront Theme and Single Product Pages

Here are the steps that you need to follow:

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to rename the sale badge.
3. Add the following code to the functions.php file of the Storefront theme.

/**

*       Rename SALE badge @ Product Archives and Single Product

*/

add_filter( 'woocommerce_sale_flash', 'njengah_rename_sale_badge', 9999 );

function njengah_rename_sale_badge() {

return '<span class="onsale">ON OFFER</span>';

}

// NOTE: PLEASE KEEP THE <SPAN> TAG

4. This is the outcome:

Steps to Replace the Sale Badge Text with an Image in the WooCommerce Storefront Theme

Here are the steps that you need to follow:

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to replace the sale badge text with an image.
3. Add the following code to the functions.php file of the Storefront theme.

add_filter('woocommerce_sale_flash', 'njengah_custom_sales_badge');

function njengah_custom_sales_badge() {

$img = '<img width="100px" height="100px" src=" http://127.0.0.1/wordpress/wp-content/uploads/2020/10/sale-tag.png"></img>';

return $img;

}

4. This is the outcome:

Conclusion

Sale Badges in your WooCommerce store are a great way to attract the attention of potential customers.

It may work well for some store owners, but some might consider it unnecessary.

This post has shared ways to remove the WooCommerce sale badge using a code snippet and CSS. Moreover, I have shared how you can replace the sale badge text with an image.

However, if you are not comfortable handling code, I recommend that you use plugins like YITH Badge Management Plugin or WooCommerce Advanced Product Labels.

Similar Articles

1. How to Add Submenu to Custom Post Type Menu in WordPress
2. How to Use WooCommerce Product Attributes Step by Step [Complete Guide]
3. How to Hide Category WooCommerce Storefront Theme
4. How to Change Font Size WooCommerce Storefront Theme
5. How to Customize Storefront Checkout Page
6. How to Remove Cart Page WooCommerce Storefront Theme
7. How to Change Storefront Theme Order of Products
8. How to Add GTIN Numbers On Products In WooCommerce
9. How to Turn off Next Product Tabs In WooCommerce Storefront
10. How to Change Storefront Number of Products Per Row
11. How to Hide Mobile Footer From Storefront WooCommerce
12. How to Remove Related Products WooCommerce Storefront Theme
13. How to Hide Tags In Storefront Theme WooCommerce
14. How to Add Categories to WooCommerce Products
15. How to Remove Cart from Storefront Theme Header
16. How to Hide All Products From Shop Page in WooCommerce
17. How to Change Products per Page WooCommerce Storefront Theme
18. Hide or Remove the Quantity Field from WooCommerce Product Page
19. How to Change Storefront Theme Product Page Tabs Colors