By default Woocommerce sale badge shows only text (“Sale”) but there is no out-of-the-box option if you want the sale badge to show the discount percentage.
For example, instead of saying ”Sale” you would like it to show “- 40%”. In this video I am going to show you how to display the discount percentage on the Woocommerce sale badge.
Code snippet shown on the video can be found here https://wpsimplehacks.com/how-to-display-the-discount-percentage-on-the-sale-badge
Blocksy Theme and Kadence Theme are both currently two of the best WordPress themes. So, if you’re interested, then you can grab:
🅱️ Blocksy theme https://wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
🔵 Kadence theme here: https://wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
✅ If you want to be the first to be notified about the new tutorials then please subscribe to this channel. https://www.youtube.com/channel/UCYmw1Rk69KKz887kcpCq1nA?sub_confirmation=1
✅ BEST WORDPRESS THEMES:
Blocksy theme: https://wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
Kadence Theme: https://wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
Astra Theme: https://wpsimplehacks.com/astra
GeneratePress: https://wpsimplehacks.com/generatepress
OceanWP: https://wpsimplehacks.com/oceanwp (SAVE 10% Coupon WPSH10)
✅ MY FAVOURITE WEBHOSTING PROVIDERS:
Verpex Hosting https://wpsimplehacks.com/verpex
A2 hosting https://wpsimplehacks.com/a2-hosting
Cloudways https://wpsimplehacks.com/cloudways
✅ AWESOME WORDPRESS PLUGINS:
WPCodeBox https://wpsimplehacks.com/wpcodebox (SAVE 20% Coupon WPSH20)
WooLentor Elementor/Gutenberg add-on https://wpsimplehacks.com/woolentor (SAVE 20% Coupon WPSH20)
Best WordPress Backup, Migration and Staging plugin – WpVivid Pro https://wpsimplehacks.com/wpvidid (SAVE 20% Coupon WPSH20)
Best Gutenberg Blocks addon – Kadence Blocks https://wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin – Fluent Forms: https://wpsimplehacks.com/fluentforms (SAVE 20% Coupon: WPSH20)
Best for email marketing – Fluent CRM: https://wpsimplehacks.com/fluentcrm (SAVE 20% Coupon: WPSH20)
Best events calendar and ticket selling plugin – WP Eventin https://wpsimplehacks.com/wp-eventin (SAVE 20% Coupon: WPSH20)
Best for creating tables – Ninja Tables https://wpsimplehacks.com/ninjatables (SAVE 20% Coupon: WPSH20)
Best WordPress LMS – Tutor LMS https://wpsimplehacks.com/tutorlms (SAVE 20% Coupon thmwelcome20)
Best WordPress SEO plugin – SEOPress https://wpsimplehacks.com/seopress
Image Map Pro – https://wpsimplehacks.com/imagemap
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool – Kadence WooExtras https://wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Advanced Dynamic Pricing Pro https://wpsimplehacks.com/dynamic-pricing-yt (SAVE 20% Coupon: WPSH20)
Phone orders For Woocommerce Pro https://wpsimplehacks.com/phone-orders-yt (SAVE 20% coupon: WPSH20)
Advanced Orders Export Pro https://wpsimplehacks.com/export-orders-yt (SAVE 20% coupon: WPSH20)
Best Woocommerce sidecart plugin – Woocommerce Cart in One https://wpsimplehacks.com/cartinone
source
Great , And How can I get to display in a chosen text block?
This is what I've been looking for. Thank you so much
How can I remove those "offer" tags?
where do I
get the codes
Hello, It's work perfect! Please let me know how i can add a text on the front of percent ? For example, to have Redution X% ?!
Many thank's for video.
thanku so much
Just what I needed. What a hero!
Not showing any snippet in woochamp
Do you have php code to display a coupon on product page?
I accidently deleted it from the snippets without deactivating it, and now, the badge keeps displaying while I want to delete it. So how?
dont work
Code for variable and grouped product is throwing error in line 3 in my case
Dismiss notice.
Snippet automatically deactivated due to an error on line 3:
Syntax error, unexpected token "<", expecting "(".
Please look after it.
YOU ARE A STAR!!!!
I can't find code
it works thanks😍
thanks
Thanks you so much ! It's very useful but teh bagde 'On sale' does not show on the main page of the product… I need to clic on the product to see the discount. Do you know how to fix it ?
thank you so much sir it help me lot
Hi mate, code is great , but there is problem badge is not show on mobile versions ?
How do i change the color?
perfect thank you very much!
Hii
This is not working in my website