How to Display Discount Prices in WooCommerce (Easy Guide)

A staggering 256 billion online shoppers hunt for coupons/discounts before buying scream loud enough to support the fact, how powerful and effective of a marketing tool discounts are for an online store.

By strategically displaying discounted prices in your WooCommerce store, you can capitalize on this trend and drive sales. A well-executed discount strategy can attract new customers, retain existing ones, and boost your overall revenue.

In this guide, we’ll explore the strategies and techniques to display discount prices in WooCommerce stores to maximize their impact and drive your business forward.

How to Display Discount Prices in WooCommerce?

WooCommerce doesn’t pack any built-in tools to set up auto-applicable discounts. Therefore, there’s no feature to show discount price in WooCommerce.

However, there are a large number of discount plugins available in the market that allow you to generate discount rules as well as display discount prices in WooCommerce.

One such plugin is Disco – Dynamic Discount Plugin. Disco makes setting up different discount rules a breeze.

In addition to creating discount rules, Disco also automatically show discount on product page WooCommerce. Not only product pages but it also displays discounts on the Shop and Category pages as well.

Let us walk you through how Disco can display discount prices in WooCommerce. We will create a 15% storewide discount with the plugin for this walkthrough.

Step 1: Install a WooCommerce Discount Plugin (Disco)

Login to your WordPress admin panel and search for the plugin from Plugins >> Add New.

Install and activate the plugin.

Step 2: Create a Discount Rule

Go to the plugin’s dashboard and click the “Create a Discount” button.

You will be redirected to the discount generation window, where you have to configure the discount settings.

Step 3: Select Discount Category and Products

From Discount Intention, select Product.

For this 15% storewide discount example, we will select All Products. You can also set discount expiry dates for time-sensitive discounts.

Step 4: Select Discount Type and Set Value

Select the Percentage option from the Discount Type dropdown and input your value, which in this case is 15.

Step 5: Display Discounts on Storefront

Save the discount rule. Disco will automatically start displaying the discounted rate along with the original rates (strikethrough) across your storefront.

Here’s how Disco displays discounts on category pages.

On a single product page –

Finally, the discount and regular price cart and checkout page display WooCommerce ​view –

This is how to display discount percentage in WooCommerce using a discount plugin automatically. Additionally, there are other ways you can display discount prices in your Woo store.

How to Display Discount Prices in WooCommerce Using Custom Codes?

Creating discount rules but not showcasing them effectively in your storefront is like throwing a party and forgetting to send out invites!

Sure, the discounts exist, but if customers can’t see those savings displayed clearly, the impact isn’t nearly as strong. With a bit of custom code, you can make sure each discount shines on the product pages, creating a more enticing shopping experience.

In the following sections, we will guide you on how to set up custom discount displays in WooCommerce using codes to maximize those savings for your customers.

Important Note: You need to be very cautious when using custom codes. The code’s effectiveness depends heavily on the WordPress theme you are using. You should always back up your site or use a child theme when implementing custom codes.

How to Display a Discount Banner in WooCommerce Using Codes?

We will first display a banner for the same 15% storewide discount we created above.

This is the banner we want to display on the Shop and Category pages in WooCommerce.

Here are the steps you need to follow.

Step 1: Upload the Banner

First, upload your banner image to the WordPress Media Library and copy its URL.

Step 2: Add Custom Code

Navigate to your theme’s functions.php file. Add this code:

add_action('woocommerce_before_main_content', 'display_discount_banner');

function display_discount_banner() {

if (is_shop() || is_product_category()) {

     echo '<div class="discount-banner" style="text-align: center;">

               <img src="YOUR_BANNER_IMAGE_URL" alt="Discount Banner">

           </div>';

}

}

Step 3: Replace the Image URL

Replace “YOUR_BANNER_IMAGE_URL” with the banner URL you copied.

Step 4: Add Custom CSS

To style your banner, you can add CSS codes. Again, the impact of these codes varies from theme to theme.

Make sure your current theme supports the codes. You can add CSS in two ways –

1. From Appearance >> Customize >> Additional CSS.
2. Editing the Style.css from Theme File Editor.

Here’s an example code:

.discount-banner img {

width: 100%;

max-width: 1200px;

margin: 10px auto;

}

Step 5: Save and Test

Save changes, then check your Shop and Category pages to ensure the banner appears correctly.

Here’s the Category page view.

Single page view- 

This setup will display your banner across your Shop and Category pages. Through this WooCommerce display discount price method, you can let your customers easily spot your discount promotion.

How to Add a Badge to Display Discount Prices in WooCommerce?

Adding a badge to display discount prices can make your discounted items stand out, instantly drawing customers’ attention to the deal. With a bright badge next to the product title, you make it easier for shoppers to see savings at a glance, which can encourage more clicks and purchases.

Here’s how to add a custom “15% Off” badge to highlight discounts in WooCommerce using a mix of CSS and PHP code for a more attractive, effective display.

Step 1: Access Theme File Editor

Generally, the Theme File Editor is placed under the Appearance menu in the WordPress left menu panel. However, this varies depending on the theme you are using.

For WordPress’s own theme Twenty Twenty-Four, this section is located inside Tools.

Step 2: CSS for Badge Styling

Click and scroll down to the bottom of the Style.css file. Add this CSS there to style the badge with a bright background color:

.discount-badge {

display: inline-block;

background-color: #007BFF !important; /* Bright blue */

color: #FFFFFF !important;

border-radius: 20px;

padding: 5px 10px;

font-size: 12px;

font-weight: bold;

margin-left: 10px;

}

Update the file when done.

Step 3: PHP to Display Badge Next to Title

Go to functions.php and scroll down to the bottom. Add the following PHP code to your theme’s functions.php file to display the badge beside the title:

add_filter('the_title', 'add_discount_badge_to_title', 10, 2);

function add_discount_badge_to_title($title, $id) {

if (is_product() || is_shop() || is_product_category()) {

     $product = wc_get_product($id);

     if ($product && $product->is_type('simple') && $product->get_price() < $product->get_regular_price()) {

         $title .= ' <span class="discount-badge">15% Off</span>';

     }

}

return $title;

}

Step 4: Save and Test

Save the functions.php file and visit your storefront. The code we added should add the “15% Off” badge next to the product title on the product, shop, and category pages whenever a discount is detected.

You can adjust the colors and size in the CSS for more customization.

Here’s how WooCommerce display discount price badge on individual pages.

Note: The effectiveness of custom codes heavily depends on the theme you are using. Not all themes will display the elements the same way we demonstrated. Be sure to check your theme’s documentation to understand how it handles custom code and styling adjustments.

How to Display Discount Badges on Multiple Discount Rules?

It is pretty common to have multiple discount rules active simultaneously in your WooCommerce store. You obviously want to display discount prices in WooCommerce for all the offers.

Let’s say you have two discount rules.

1. 15% discount on the “Summer Collection” category.
2. 10% discount on the category “Eco-Friendly.”

You want to display different badge colors for these discounts. Here’s how you do it.

Step 1: Create the Discount Rules

First things first, you need to create the discount rules. For a 15% discount, the top settings will be the same as before.

Next, we need to add a condition.

In Disco, conditions allow you to create more targeted discount rules based on specific criteria. For example, you can apply discounts only when certain product attributes, categories, or cart values meet defined conditions.

This enables flexible discount strategies—like offering a discount exclusively on eco-friendly products or summer collections. With conditions, you can set up rules that adapt to various shopping scenarios, making your discounts more relevant and enticing for customers, all while enhancing your control over the promotional process.

For this example, add the Categories condition.

Select your category and save the discount rule. Similarly, create another discount rule and set a 10% discount for the “Eco-Friendly” category.

Step 2: Add the PHP Code for the Badge

To display a badge for products with a 15% discount in the “Summer Collection” category and a 10% discount in the “Eco-Friendly” category use the following code in your theme’s functions.php file.

add_filter('the_title', 'add_discount_badge_to_title', 10, 2);

function add_discount_badge_to_title($title, $id) {

if (is_product() || is_shop() || is_product_category()) {

     $product = wc_get_product($id);

     if ($product) {

         $categories = $product->get_category_ids();

         $is_summer_collection = in_array(get_term_by('slug', 'summer-collection', 'product_cat')->term_id, $categories);

         $is_eco_friendly = in_array(get_term_by('slug', 'eco-friendly', 'product_cat')->term_id, $categories);

         if ($is_summer_collection) {

             $title .= ' <span class="discount-badge summer-badge">15% Off</span>';

         } elseif ($is_eco_friendly) {

             $title .= ' <span class="discount-badge eco-badge">10% Off</span>';

         }

     }

}

return $title;

}

Code Explanation

• The PHP code checks for product categories without relying on the product’s “On Sale” status, so the badge appears on any product within the “Summer Collection” or “Eco-Friendly” categories with discounts.
• Update the category slugs (‘summer-collection’ and ‘eco-friendly’) as needed.

Step 3: Add CSS for Badge Styling

Add the following CSS code in style.css file.

.discount-badge {

display: inline-block;

color: #FFFFFF !important;

border-radius: 20px;

padding: 5px 10px;

font-size: 12px;

font-weight: bold;

margin-left: 10px;

}

.summer-badge {

background-color: #007BFF !important; /* Bright blue for 15% */

}

.eco-badge {

background-color: #FF4500 !important; /* Bright red for 10% */

}

Step 4: Save and Test

Save your theme files you edited and jump to the storefront. Your “Summer Collection” products should display a blue badge, and “Eco-Friendly” should display a red badge as per our set CSS.

How to Display Discount Prices in WooCommerce Using a Plugin

Adding custom code to your WordPress site can be risky for several reasons. If you’re not careful, it can break your theme or other functionalities, especially with updates or conflicting plugins. Even a small mistake in the code can lead to a site crash, security vulnerabilities, or compatibility issues.

Using a plugin, however, simplifies the process by providing built-in functionality that’s regularly updated, tested, and supported. This way, you can safely add features like discount banners without the fear of messing up your site.

Plus, plugins typically come with easy-to-use interfaces that save time and effort. Most importantly, a plugin can help easily display banners for any discount rule, including display bulk pricing discounted prices WooCommerce.

The plugin we will use is called Banner Management for WooCommerce. Let us walk through the display discount prices in WooCommerce process and different settings of the plugin.

Installing and Accessing the Plugin Settings

Go to Plugins >> Add New and search for Banner Management for WooCommerce. Install and activate the plugin once you find it.

After activation, go to Dotstore Plugins >> Banner Management to access the plugin dashboard.

Here are all the available plugin settings.

Display Discount Banner in Shop Page

To display discount prices in WooCommerce shop page, the plugin allows you to set a banner at the top of the page. Click on the Banner For Shop Page option and enable it.

On the free version of this plugin, you can only display one single banner, while on the pro version, you can display banner sliders.

Upload or insert your image link. Remember, your image resolution must be under 1800 X 600 PX.

Save your settings and visit the Shop page to verify if your settings are working or not.

Display Discount Banners on Category and Individual Product Pages

You can display a common banner on all product pages. To set that, enable the following settings under the Product page Banner Settings.

The rest of the settings are the same. Upload your common banner.

Here’s the product page view –

If you don’t want the same banner for all pages and want to set separate banners for individual pages, you can do so by adding them from the target product pages.

Go to Products >> All Products and enter your target product page to edit.

Scroll down to the Product Banner Settings and set your custom banner for the product. This way, you can set discount banners on specific product pages.

Similarly, to display discount prices in WooCommerce through banners in specific category pages, enter the category page from Products >> Categories. Scroll down to the Category Based Banner Settings and configure the settings to set the banner.

You can also set a custom button along with a link to your target pages from the banner settings in the category and product pages. Here’s what a category page banner looks like.

Key Strategies for Displaying Discount Prices in Your WooCommerce Store

To maximize the impact of your discount offers, consider these key strategies for displaying discount prices in your WooCommerce store:

1. Clear and Conspicuous Display

• Strikethrough Original Price: Visually highlight the original price and the discounted price.  
• Bold or Larger Font for Sale Price: Make the sale price stand out.
• Use a Contrasting Color: Use a contrasting color for the discounted price to draw attention.

2. Strategic Placement

• Product Page: Position the discount information prominently on the product page, near the product title and price.  
• Cart Page: Clearly display the discount applied to the cart total.
• Checkout Page: Reiterate the discount and its impact on the final order total.

3. Effective Use of Badges and Labels

• “Sale” Badges: Use eye-catching badges to indicate discounted products.  
• Percentage Off Labels: Highlight the WooCommerce percentage discount, e.g., “20% Off.”
• Limited-Time Offers: Use labels like “Flash Sale” or “Limited Time Offer” to create urgency.  

4. A/B Testing

• Experiment with different display techniques to determine the most effective approach.
• Test different font sizes, colors, and placements to optimize conversions.

5. Mobile Optimization

• Ensure that discount information is easily visible on mobile devices.
• Use responsive design to adapt the display to different screen sizes.  

6. Customer Segmentation

• Target specific customer segments with personalized discounts.
• Use customer data to identify high-value customers and offer exclusive discounts.

7. Clear and Concise Communication

• Use simple and straightforward language to explain the discount.
• Avoid complex terms and jargon.

By effectively implementing these strategies, you can maximize the impact of your discount offers and drive significant sales growth. Remember to continuously monitor and analyze your results to fine-tune your approach and optimize your discount strategy.

Why Do You Need To Display Discount Prices in WooCommerce?

Displaying discount prices effectively in your WooCommerce store is a powerful strategy to boost sales and enhance customer experience. By clearly highlighting reduced prices, you can:

1. Captivate Shoppers and Drive Interest

• Visual Impact: A striking discount badge or a prominent display of the sale price immediately grabs shoppers’ attention.  
• Sense of Urgency: Limited-time offers or time-sensitive discounts create a sense of urgency, motivating customers to act quickly.  

2. Boost Sales and Conversions

• Impulsive Purchases: Clear and enticing discounts can trigger impulse buying decisions that lead to increased sales.
• Higher Average Order Value: By offering discounts on specific products or categories, you can encourage customers to add more items to their cart.  
• Reduced Cart Abandonment: A well-timed discount can persuade hesitant customers to complete their purchase.  

3. Enhance Customer Satisfaction and Loyalty

• Perceived Value: Customers feel they’re getting a great deal when they see significant discounts.
• Loyalty Building: Offering exclusive discounts to loyal customers can foster stronger relationships and encourage repeat business.  

4. Effective Inventory Management

• Clearing Excess Stock: Use discounts to move slow-moving or outdated products.
• Seasonal Promotions: Offer discounts to clear out inventory before new seasons or holidays.  

Wrap up

By showcasing discounts clearly, whether through custom code or a reliable plugin, you can make savings more visible and encourage higher conversions. This display discount prices in WooCommerce guide has shown you some easy ways to do just that, helping you set up a discount display that catches attention without extra hassle.

Experiment with different display styles to find what works best, and watch your store’s engagement and sales grow as discounts become more visible to shoppers.