WooCommerce on sale badge is a label that is displayed on the single product page, product archives pages, up-sell, cross-sells and related products. Ideally, this button is designed to notify your shop visitors that certain products have on sale offer.
WooCommerce On Sale Badge
You can set up the WooCommerce on sale badge for each product by adding the sales price and the regular price for the same product. In this post, I want to illustrate how you can change the sales badge as well as how you can remove it or hide it altogether.
The design of on-sale badge may vary from one WooCommerce site to another depending on the theme used on the store. The default WooCommerce theme – Storefront comes with a default plain on sale badge without any design as shown on the image below :
Remove WooCommerce On Sale Badge
If you want to remove the sale badge from your WooCommerce store, you should consider to add the following code in your child theme functions.php
file.
This code is a filter that checks for the sales badge on the page and replaces it with an empty string in the return statement of the callback function.
// Add filter to remove the sale_badge add_filter( 'woocommerce_sale_flash', 'njengah_remove_on_sale_badge' ); function njengah_remove_on_sale_badge( $sale_badge ){ return ''; }
Remove or Hide WooCommerce On Sale Badge Using CSS
You can also use CSS to hide WooCommerce on sale badge. The CSS code below can be added to the child theme stylesheet to hide on sale badge across the WooCommerce store.
This trick may fail for some theme since there could be some other code that conflicts with this CSS code. Using the filter to hide WooCommerce on sale badge it the surest way to get it done.
/*Hide WooCommerce On Sale Badge*/ .woocommerce span.onsale { display: none; }
Change WooCommerce On Sale Badge
You can also change the text of the WooCommerce on sale badge using a filter that I will share in the code below. Ideally, you may want to change the name sale to some custom name, possibly a translated version for the sales badge.
You can use the code below in your child theme functions.php
file to change WooCommerce on sale badge to your custom text.
// Add filter to change the sale_badge text add_filter( 'woocommerce_sale_flash', 'njengah_change_on_sale_badge', 10, 2 ); function njengah_change_on_sale_badge( $sale_badge, $post ) { return '<span class="onsale">Custom Text</span>'; }
Conclusion
In summary, we have highlighted how you can remove WooCommerce on sale badge or how to hide WooCommerce on sale badge as well as how to change WooCommerce on sale badge text. You should simply add each of these code snippets to your child theme functions.php
file and you will effectively hide or change the WooCommerce on sale badge.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
Similar Articles
- How to Hide Tax Label In WooCommerce
- How to Hide Weight of Product in WooCommerce
- How to Add WooCommerce Storefront Product Pagination
- How to Hide Shipping Methods for Certain Conditions
- How to Hide Product Description Heading WooCommerce
- How to Simplify Checkout Free Items Storefront Theme
- How to Remove Email Footer Text ‘Built With WooCommerce’
- How to Hide Quantity In Stock In WooCommerce
- How to Hide Price If Zero In WooCommerce
- How to Change the WooCommerce ‘Added to Cart’ Notice
- How to Hide Out of Stock Visibility In WooCommerce
- WooCommerce Storefront Theme Review
- How to Hide Prices From Google In WooCommerce
- How to Create WooCommerce Secret Product
- What is WooCommerce Storefront Theme ? [Answered]
- How to Hide Unavailable Variations In WooCommerce
- How to Check if User is Logged In in WordPress
- How to Hide Product SKU In WooCommerce
- How to Remove Related Products WooCommerce Storefront Theme
- How to Hide WooCommerce Marketing Hub Admin Option