Don’t you like the Sale badge that WooCommerce prints on your products on sale?
You can quickly change the text if you want, or show the percentage saved on the purchase instead of a static text.
To show the percentage, i suggest the extension Sale Flash Pro, to change instead the text you can use a little snippet.
Open your functions.php file located in wp-content/themes/your-theme-name/ and add this code at the end of it:
Receive new articles from this blog directly in your inbox! No spam guaranteed!
Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!
Choose an amount
Or enter a custom amount
Your contribution is appreciated.
Your contribution is appreciated.
Your contribution is appreciated.
DonateDonate monthlyDonate yearly
Hi,
I’ve added this code but it’s not looking good on my website.
https://physicalwellbeing.co.uk/shop/
Whole text can’t bee seen. Any way to fix this?
That’s because your theme uses the corner as badge instead of the default circle.
The only thing i found to fix is to add this CSS code to your theme:
.woocommerce .onsale, .woocommerce-page .onsale { height: 110px; line-height: 200px; }
It does not look that good though. I suggest to ask how to change the badge to your theme author!
Is there maybe any way to move this ribbon from left to right side?
Yeah, but it’s not that easy because you also need to rotate it to the other side. Please contact the theme author for this.
Thanks for understanding!
Hi,
I’ve added this to my child theme’s functions.php but the text isn’t changing (using a child theme of Storefront). Could there be something interfering with it?
Thanks!
Hi,
Yes it’s possible, or maybe the code has been added wrongly.
Please try without child theme.
This does seem to work, but do you have any advice on how to also translate the text with WPML? After adding the code I get the text entered in functions.php for all languages and I can’t seem to find any way to access the additional code snippet through WPML’s string translation.
Ah – found it! You need to re-scan the theme for strings in WPML.
Thank you very much for the original code though!
You’re welcome!
Hi Nicola,
Thanks for the snippet!
I’m trying to get this to work for specific categories but each time I try to modify the snippet it removes the Sales badge from the products on Shop page (works on individual product pages). Any suggestions to get this to work for specific categories?
Thx, worked “right out of the box” with some css-editing.
Awesome! I’m glad it worked well for you!
Hi,
Thanks for the code.
Perhaps you know a simple way to change “Sale” text for each product (depending on it’s id or custom field value)?
Hi Player, sorry if I missed your comment.
I see you already fixed in the comment below though, good job!
Just wrote myself one – adjusting text depending on product ID.
Keep up with your blog.
Worked Perfct! THX!
You’re welcome!
Works perfectly. Thanks!
Thanks a lot , it worked perfectly on my two sites after some CSS tweaks !
big UP !
hi, how can I add percentage sale for my grouped products? can you help me?
Hi Shima,
Grouped products can’t be discounted since you can’t set a price on a grouped product.
Worked perfectly on Divi. Total brilliance! Thank you!
You’re welcome!
How do you change the sale flash button location?
I am making a custom theme and the button appears before the product images in the category pages.
I would like to make it appear after them, just like in the storefront theme and cannot find how to move it.
Hello Kilroy,
You can use this code to unhook the sale flash from is default location:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash' );
And then use add_action() to add it in another location, for example after the product title:
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash' );
How can I change the position of the Add to Cart & Add to Wishlist into the product image not under the image ?
Hi,
I don’t know about the Add to Wishlist, but for the Add to Cart button, you need to remove the filter woocommerce_template_single_add_to_cart from woocommerce_single_product_summary and add it to a different hook.
Under the image, it could be woocommerce_before_single_product_summary with a priority higher than 20.
Nicola Mustone Thank’s a lot. I searched for this answer the hole day, about “unhook the sale flash from is default location:” ,now I have to put this bagde on home page too .
Receive new articles from this blog directly in your inbox!
No spam guaranteed!
Hi, I’m Nico! Support Lead at Automattic, championing WordPress.com & WooCommerce. Off-duty, I’m at Elemental Beacon, leading epic D&D adventures. Let’s connect, whether it’s about WordPress or a quest!
Leave a Reply