How to Display “You Save x%” in WooCommerce

WooCommerce only allows you to display the regular and sales price on the product page, the customer is left to figure out how much money he is saving. 

A better way to manage this is to show the percentage of the money the consumer saves when he makes that purchase. This offers customers a better picture and makes it easier for them to determine whether or not to make the purchase.

So, In today’s article, I’ll show you how to display “You Save %” in WooCommerce with the help of Dynamic Pricing & Discount Rules plugin.

Here’s the final results we’ll be getting today.

So without further ado, let’s get started. 

How to Display “You Save %” in Woocommerce?

Here I’ll show you how to display the “You Save %” in WooCommerce with the help of Dynamic Pricing & Discount Rules plugin. 

This is the plugin that will help you to display the amount saved or the percentage of it and you can display this on the product and the cart pages. 

This plugin will also help create promotional discounts like flash sales, tiered pricing, and much more. 

Note: You can only display the You Save % if you are offering discounts created by the Dynamic Pricing & Discount Rules plugin.

So to display the “You Save %” in WooCommerce, follow the following steps.

1. Install and Activate the Dynamic Pricing & Discount Rules Plugin

Note: You can skip this step if you have installed and activated the Dynamic Pricing & Discount Rules plugin. 

To install the Dynamic Pricing & Discount Rules plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the Dynamic Pricing & Discount Rules plugin.

2. Edit the Product to Create Discounts on the Product Level

Now, we need to create discounts on the store using the Dynamic Pricing & Discount Rules plugin. You can create storewide discounts, bundled discounts, or any other type of discounts. 

But for this tutorial, I’ll be creating discounts of 15% off a specific product created on the product level. So to create discounts, follow the following steps.

2.1. From WordPress Dashboard

Navigate to the Products » All Products from your WordPress Admin Dashboard.

2.2. Hover Your Mouse on any of the Product 

Now hover your mouse on any of the products and click on the Edit button to edit the product. 

2.3. Scroll to the Product Data Section

Once you click on the edit button, you’ll be redirected to the product edit page. Now scroll down to the Product Data Section to offer discounts on the product. 

2.4. Click on the Pricing DIscount Rules Tab

Now to add the discounts, click on the Pricing Discount Rules tab in the left sidebar. 

2.5. Add the Pricing Rule

Now click on the Add Pricing Group button to add a pricing rule for the product. 

2.6. Customize the Rule

Keep the rest of the settings as default and in the Minimum Quantity field enter 1 and in the Maximum Quantity field enter * (asterisk). 

And from the Type dropdown, select the discount type you want to offer and enter the Amount in the field. I have added 15 Percentage Discount.

2.7. Update the Product

Now, scroll above and click the Update button to save the settings. 

3. Navigate to Dynamic Pricing & Discount Rules Plugin General Settings

Once you have added the discounts, now navigate to Woosuite » Dynamic Pricing Rules from your WordPress dashboard.

4. Navigate to the Options Tab

Now from the plugin’s settings, click on the Options tab.

5. Enable the Amount Saved

Now to display the “You Save %” on the product page, enable the Amount Saved by clicking on the toggle button. 

By default “You Save %” will be displayed on the product and cart pages. I am keeping the default settings for this tutorial but it’s totally up to you to configure the settings as you want. 

6. Save the Changes

Now click on the Save Changes button at the top right corner to save the changes. 

7. Final Results

Now if you visit the product page of the product that you edited, you’ll see that the “You Save %” has been displayed on the product page. It’ll make it clear to the user how much discount is he/she getting on this product. 

Also, when I added this product to my cart and visited the cart page, Here’s the results I got

Show Discount Percentage on the Sale Bage with code

// Add Discount Percentage on the Sale Badge
add_action( 'woocommerce_sale_flash', 'aovup_sale_badge_percentage', 25 );
 
function aovup_sale_badge_percentage() {
   global $product;
   if ( ! $product->is_on_sale() ) return;
   if ( $product->is_type( 'simple' ) ) {
      $max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
   } elseif ( $product->is_type( 'variable' ) ) {
      $max_percentage = 0;
      foreach ( $product->get_children() as $child_id ) {
         $variation = wc_get_product( $child_id );
         $price = $variation->get_regular_price();
         $sale = $variation->get_sale_price();
         if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
         if ( $percentage > $max_percentage ) {
            $max_percentage = $percentage;
         }
      }
   }
   if ( $max_percentage > 0 ) echo "<span class='onsale'>You saved -" . round($max_percentage) . "% Off</span>"; // Here you can customize the text before and after discount percentage

}

Conclusion

Now you know the easiest method to display the “You Save %” on the product and cart pages. It’ll help you to improve the customer experience in your store. 

Now it’s totally up to you to configure the settings as you want and let users know how much they are saving on a particular product. Our dedicated customer support team typically replies within 48 hours.

Now it’s over to you, to get started download the Dynamic Pricing & Discount Rules plugin!