June 28, 2023

How to Add a “You Save” WooCommerce Badge

Play Video

Displaying a “You Save” WooCommerce badge on sale prices can boost customer engagement and conversions. This tutorial, by WP Simple Hacks, will guide you through the process of displaying a Woocommerce Sale Price Badge on your website using Code Snippets. Alternatively, you also can use other Code Plugins like WP Code Box.

Set up “You Save” Woocommerce Badge

Follow these steps to display the Woocommerce Sale Price Badge:

  1. Install Code Snippets
    Go to Plugins > Add new and search for “Code Snippets”
    Install the Code Snippets Plugin
  2. Add New Snippet & Title
    Go to the Snippets section in your website’s backend, add a new snippet, and fill in the title (in our case “Show save price”).
    Add New Snippet & Title
  3. Copy & Paste Code
    Copy & Paste the provided code below into the snippet box.

    function you_save_text_for_product() {
        global $product;
        // works for Simple and Variable type
        $regular_price 	= get_post_meta( $product->get_id(), '_regular_price', true ); // 36.32
        $sale_price 	= get_post_meta( $product->get_id(), '_sale_price', true ); // 24.99
        if( !empty($sale_price) ) {
            $saved_amount 		= $regular_price - $sale_price;
            $currency_symbol 	= get_woocommerce_currency_symbol();
            $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
                <p class="you_save_price">You save: <?php echo $currency_symbol .''. number_format($saved_amount, 2, '.', ''); ?></p>				
    add_action( 'woocommerce_single_product_summary', 'you_save_text_for_product', 12 ); // hook priority

    Source: WP Simple Hacks

  4. Snippet Settings
    Set the location to “Run on site front end”.
    Snippet Settings
  5. Save Changes
    Save your changes and activate the snippet. Test if it is working correctly.
    Save Changes
  6. Custom Layout
    You can customize the appearance of the “You Save” badge using CSS. Use the “you_save_price” id and add your custom CSS code to the Customizer (Appearance > Customize).
    Custom Layout

Benefits of “You Save” Woocommerce Badge

Displaying a “You Save” badge on your Woocommerce sale prices has several benefits:

  • It enhances customer engagement.
  • It can boost conversions.
  • It provides clear information about the savings a customer will make.

Common Problems

  • The badge does not appear on your website
    Ensure that the snippet is activated and the location is set to “Run on site front end”.
  • CSS changes not showing
    If the appearance of the badge does not change after modifying the CSS, ensure that you have clicked “Publish” in the Customizer.


Displaying a “You Save” Woocommerce Sale Price Badge on your website is a simple yet effective way to enhance customer engagement and boost conversions. Follow the steps in this guide to implement this feature on your e-commerce site. Happy selling!

Required Resources

WP Code Box Logo
Free Options
WooCommerce Logo
Free Options
Code Snippets Logo
Free Options
Credit to WP Simple Hacks
WP Simple Hacks is a YouTube channel that focuses on delivering valuable and straightforward video tutorials for WordPress enthusiasts. The channel's creator, a seasoned WordPress expert, shares his knowledge and experience by covering various topics, such as theme customization, plugin usage, site optimization, and problem-solving techniques.
How to Add a “You Save” WooCommerce Badge
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.