April 27, 2023

How to Show Discount Percentage in WooCommerce with Code Snippets

Play Video

Learn with Web Squadron how to show discount percentage in WooCommerce with Code Snippets. This feature not only adds a visual appeal to your product listings but also provides a clear indication of the savings a customer can make, thereby potentially increasing conversions. This post will walk you through the process of implementing this feature on your WooCommerce site.

How to Show Discount Percentage in WooCommerce

  1. Install the Code Snippets Plugin
    The first step is to install the Code Snippets plugin. Navigate to your WordPress dashboard, click on ‘Plugins’, then ‘Add New’. In the search bar, type ‘Code Snippets’, then install and activate the plugin.
  2. Create a New Snippet
    Once the plugin is installed, go back to your WordPress dashboard. You will see a new option called ‘Snippets’. Click on it, then select ‘Add New’. Give your new snippet a title.
  3. Add the Code
    The next step is to add the code that will display the discount percentage. You can find this code below. Copy the code, then paste it into the ‘Code’ section of your new snippet.

    if ( !function_exists( 'evolution_custom_sales_price' ) ) :
     * Show percent savings on sale - Only for WooCommerce version 3.0+
     * @add filter to products
     * @return filter
    function evolution_custom_sales_price( $price, $regular_price, $sale_price ) {
        $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
        $percentage_txt =  __(' Save ', 'evolution' ).$percentage;
        $price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del> <ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) . $percentage_txt : $sale_price . ' ' . $percentage_txt ) . '</ins>';
        return $price;
    add_filter( 'woocommerce_format_sale_price', 'evolution_custom_sales_price', 10, 3 );

    Source: Code Snippets

  4. Save and Activate
    After pasting the code, click on ‘Save Changes and Activate’. Your WooCommerce site will now display the discount percentage next to the sale price on all products that are on sale.

WooCommerce Show Discount Percentage Benefits

Displaying the discount percentage on your WooCommerce site can have several benefits.

Increased Transparency

Customers appreciate transparency. By showing the discount percentage, you are providing clear information about the savings they can make, which can help to build trust.

Enhanced User Experience

The discount percentage adds a visual element that can enhance the user experience. It can make your product listings more attractive and easier to understand.

Potential Increase in Conversions

The discount percentage can act as a powerful motivator for customers to make a purchase. Seeing the savings they can make can encourage them to add the product to their cart.

Show Discount Percentage WooCommerce – Tips & Tricks

While the process of displaying the discount percentage is straightforward, there are a few tips and tricks that can help you make the most of this feature.

  • Customize the Display
    You can customize the display of the discount percentage to match the style of your site. This can be done by modifying the CSS in your theme.
  • Use it Strategically
    Consider using the discount percentage display strategically. For example, you could highlight it during sales events to draw attention to the savings.

Common Issues and Solutions

  • Discount Percentage Not Displaying
    If the discount percentage is not displaying, make sure that the Code Snippets plugin is activated and that the code has been correctly added and activated.
  • Incorrect Discount Percentage
    If the discount percentage is incorrect, check that your sale and regular prices are correct. The discount percentage is calculated based on these prices.
  • Display Issues
    If the discount percentage is not displaying correctly, it may be due to a conflict with your theme or another plugin. Try deactivating other plugins to see if this resolves the issue.

Required Resources

WooCommerce Logo
Free Options
Code Snippets Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
How to Show Discount Percentage in WooCommerce with Code Snippets
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.