New!Loyalty Points, Rewards and Referral plugin for WooCommerce!Introductory Offer! Coupon Code: POINTS20Buy Now

Published under WooCommerce
Last updated on

How to Display Discounts on WooCommerce Product and Cart Page

Displaying discount information is a way of promoting your WooCommerce store by announcing the available discounts to your visitors.

In this article, we are going to discuss various methods of displaying discount information on the product and cart page such as display bulk discount table on product page, WooCommerce show percentage discount on the product page, as simple discount information, display sale products using a discount badge, show strikeout regular price and display sale price, by displaying the discount applied on the cart page, by displaying the amount saved after purchase.

We will go through a step by step process of settings to display discount information through various methods.

Why display WooCommerce discounts on the product and cart page?

Your visitors will be aware of the available discounts from your WooCommerce store through the strategy of displaying discounts both on the product and cart page. The methodology to show the discount price on the Woocommerce product page could bring great conversions to your store and also increases the click-through rates. It acts as an eye-catchy factor for your customers/visitors and would drive more revenue to your store.

Through this strategy, WooCommerce shows percentage discounts you can easily navigate your visitors to their required destinations. This also gives in hand to develop a smooth checkout process at your WooCommerce store.

Methods to display discounted products in a WooCommerce store

The technique of displaying discounted products or prices on a WooCommerce store can be implemented using custom codes, specialized plugins or even can be operated through themes customization. If you are good at programming then you can implement by referring to some of the available custom codes in the market.

Many third-party plugins can be utilized in configuring the required settings through which it can be achieved in a few clicks. WooCommerce product discounts can also be displayed through your store’s theme customization.

Your guide to show WooCommerce discounts

All the following are different ways of displaying your WooCommerce store’s discounts to your visitors

- What are the benefits of displaying WooCommerce discounts on the product page?
- Different ways to show WooCommerce discounts

- How to troubleshoot if the WooCommerce discount information isn’t displayed properly?
- FAQs - Show WooCommerce discounts

What are the benefits of displaying WooCommerce discounts on the product page?

When the WooCommerce discounts are displayed on the product page it would bring great benefits to your store. When the WooCommerce show percentage and product discounts it would urge the visitors of your website to purchase from you and it may bring large conversions.

When the WooCommerce displays sale products on the product page it looks like your store has been updated with the modernized trend. This strategy would also help you to gain more customer engagement and conversion optimization flow can be adapted easily.

Different ways to show WooCommerce discounts

The following are some of the common ways to display WooCommerce discounts both on the product and cart page. The discounts that are displayed on the product page are in respective with the price discount rules. These are easily possible with the best discount plugin “Discount Rules for WooCommerce”.

Let us install the discount plugin with the below navigation in order to show the discount information,

Step 1: Login into your WordPress Dashboard and go to the Plugins section.
Step 2: Click on “Add New” button
Step 3: Search for the plugin “Discount Rules for WooCommerce”
Step 4: Install and activate the plugin

Download plugin

If you have already installed the plugin make sure to update it to the latest version.

Display bulk discount table on the product page

This strategy is to display all the available discounts on the product page in the form of a table. It can also be used to display bulk discount table on the product page.

To enable this view, navigate to the “Offer Table” tab and choose the discount table as “Default Layout” as shown below,

1 discount table

Here is the screenshot of how it looks in the product page,

2 discount table product page

It clearly displays all the available discounts on the product in the form of a table. When it comes to a variable price product, WooCommerce price range is also displayed along with the discount table.

You can also hide the discount table in the settings page by following the below navigation,
Woo Discount Rules -> Settings -> Price Rules -> Offer table-> Disabled.

3 hide disocunt table

This will hide the WooCommerce discount table on the product page.

Display a simple WooCommerce discount information

This strategy can be considered as the advanced layout of the discount table.

To enable this view, navigate to the “Offer Table” tab and choose the discount table as “Advanced Layout” as shown below,

4 discount as information setting

When you start creating a price discount rule under this view, the general tab of the discount rule will be as illustrated below,

5 discount information general tab

Under the parameter “Format for advanced table display” write your code with the required elements to display the discount information on the product page.

For example:
Buy 3 or more and get a 20% discount, if this is the discount information that is to be displayed the code will be written as shown below,

“Buy{{min_quantity}} or more and get a{{discount}} discount”

Here is the screenshot of how it looks in the product page,

6 discount information product page

This displays the discount information on the product page in a simple and advanced way.

Show the strikeout price on the WooCommerce product/cart page

This setting is to display the discounted price on the product page and to display the crossed-out price on the cart page.
The WooCommerce show regular price and sale price on both the product and cart page with the below setting,

7 display discount price settings

Here is the screenshot of how it looks in the product page,

8 discount price product page

The regular price is crossed-out and the WooCommerce show discounted price on the product page.

Let us seen how it looks in the cart page,

9 disounted price cart page

The crossed-out price can also be displayed on the cart page with this setting.

Display discount as a sale badge

This setting is to enable a sale badge on the product page. Let us see how it can be enabled using the “Discount Rules for WooCommerce” plugin.

A sale badge is used to display the products on SALE.

To enable this option, the below setting are to be configured

10 sale badge settings

You can display a sale badge under two options,
Show only after a rule condition is matched exactly - The sale badge will be enabled only when the discount rule matches.
Show on products that are covered under any price based discount rule - The sale badges will be displayed irrespective of the price discount rule applied.
If you want to disable the sale badge then choose “Do not show” option from the drop-down.

You can customize the “text” on the sale badge and also force override the label with the below settings,

11 sale badge customization

Here is the screenshot of how it looks in the product page,

12 salebadge product page

The WooCommerce display sale products with a badge on the product page as per the selected option from the drop-down.

Show the discount message in the cart

The discount messages can be displayed both for price discount rules and cart rule.

Let us see the settings that are to be enabled when you want to display a discount message for a price rule,

Go to Woo Discount Rules -> Settings -> Promotion.
Configure the below settings to display the message,

13 messagedisplay price rule setting

Shortcodes to be used in the text box,
{{title}} - this element displays the rule name.
{{description}} - this element displays the rule description.

Here, rule description has been used to display the discount message, the code to be written is,
"{{description}}" has been applied to your cart.

Let us see the cart page for a price discount rule,

14 message display pricerule cartpage

As the setting is enabled the discount message is displayed once the price discount rule has been applied.

Let us see how to configure the settings to display the discount message for a cart discount rule,

15 message display cartrule setting

The cart page with the discount message will be as illustrated below,

16 message display cartrule cartpage

As the respective setting is enabled the discount message is displayed once the cart discount rule has been applied.

Display “You Saved” message in the WooCommerce cart

This configuration is enabled to display the discounted amount on the cart page.
Navigate to Woo discount rules --> Settings --> Promotion tab as shown below,

17 you saved settings

The message can be displayed in three different positions on the cart page and this can be chosen from the drop-down list.
It can be shown in either

  • On each line item
  • On after total
  • Both in each line item and after total

Screenshot of how it looks in each line item,

18 each line item

Screenshot of how it looks after total,

19 after total

Screenshot of how it looks in both in line item and after total,

20 both line total

You can edit the message "You saved:" Make sure to only modify that text message as illustrated below,

21 edit message

Do not make any changes to this shortcode --> {{total_discount_price}}. The message will be displayed only for price discount rules.

Change the discount name in the cart

This setting is to display a common discount name when the cart discount rules are activated. With this configuration, you can set different names in frontend and backend.

Let us see how to set it,
Woo Discount Rules -> Settings -> Cart settings.

22 change name settings

Discount identifier in the backend - In this parameter enter the discount name that is to be displayed in the backend.

Coupon name to be used in the cart/checkout in the storefront - In this parameter enter the code “Discounts applied: {rule_name}” this would automatically fetch the rule name of the cart discount rule that has been applied. This is used to display the discount name that is to be displayed in the storefront/frontend.

Here is the screenshot of how it looks in the cart page with respect to the cart discount rule that has been applied.

23 change name cart page

The rule name is displayed as the discount name on the cart page (storefront).

These are some of the common strategies that can be implemented in WooCommerce to display the special offers in your store.

How to display a promotion message to indicate the upcoming discounts?

This configuration can be set if you want to display a promotion message to indicate the upcoming discounts. This configuration is applicable only for Subtotal based cart rules. Let us get in detail with an example.

Example:
20% discount when the subtotal reaches $1000

The below steps are to be followed to display the promotion message,

  • Step1 - Enable Promotion Message
  • Step2 - Create Subtotal based cart rule
  • Step3 - Customize your message

Step1 - Enable promotion message:

Navigate to Woo Discount rules -> Settings-> Promotion tab as illustrated below,

24 promotion settings

Here, you can choose the position where the promotion message is to be displayed.
You can display the promotion message indicating the upcoming discounts in the following pages,

  • Shop page
  • Product page
  • Cart page
  • Checkout page

Step2 - Create a subtotal cart rule

Navigate to WooCommerce -> Woo Discount Rules -> Cart discount rules.

General tab,

25 cartrule generaltab

Enter the general details like rule name, description, validity in the general tab.

Condition tab,
Choose the condition as “Subtotal at least” and enter the value as 1000.

Step3 - Customize your message
In the condition tab, there is a field named “Promotion message” as illustrated below,

26 cartrule conditiontab

Enter the threshold value from when the promotion message has to be displayed. You can also enter any description as the message along with the shortcode. In this example,

The threshold value is - 700 and Message - Spend {{difference_amount}} and more to get a discount of 20%.

Discount tab,

27 cartrule disocunttab

Enter the percentage value in the discount tab.
Below are the screenshots when the cart reaches 700
Here is the screenshot of the cart page,

28 promotion message cartpage

Here is the screenshot of the product page,

29 promotionpage productpage

Similarly, the promotion message will be displayed on the shop page and the checkout page if chosen.

How to troubleshoot if the WooCommerce discount information isn’t displayed properly?

If you find that WooCommerce discount information is not displayed as expected, then check if the configurations are set properly as needed. Additionally, make sure that WordPress and WooCommerce are updated with its latest version. This could surely troubleshoot the problems you face while configuring WooCommerce special offers for your store.

If the problem continues further, contact the support team of the respective plugin to seek their help and make your WooCommerce store enjoy the benefits of displaying the discount information.

The strategy of displaying WooCommerce discount information will surely be a backbone for your store’s achievements. Give a try on all the configurations that have been discussed, gain more traffic and conversions to your WooCommerce store.

Wishing you Good Luck.

FAQs - Show WooCommerce discounts

Woocommerce shows percentage discounts are to promote your store by displaying all the available discounts through different methods. It can also be meant as an effective way of marketing your WooCommerce store.

WooCommerce display sale products using a sale badge on your shop page. Sales price can be displayed by various strategies, it can be displayed as a simple piece of discount information, in the form of a discounted price or even in the form of a table with all the available discounts on that product. All these can be displayed very clearly on the product page of your store.

WooCommerce discounts can be displayed effectively with different configurations that would drive more conversions for your store. Some of the common methods to display discounts are
  • Display bulk discount table on product page
  • Display a simple WooCommerce discount information
  • Show the discount price/strikeout price on the WooCommerce product/cart page
  • Display discount as a sale badge
  • Show the discount message in the cart
  • Display “You Saved” message in the WooCommerce cart
  • Change the discount name that has been applied in the cart

If you are good at programming then, WooComerce percentage discounts can be displayed used shortcodes. It can also be configured using suitable WooCommerce plugins. Choose the best way to show the discount information and bring in great results to your WooCommerce store.

If you don’t wish to display the discount table on the product page you can easily hide it by choosing the “Disable” option from the configuration. The below navigation will surely help you to do the necessary. Woo Discount Rules -> Settings -> Price Rules -> Offer table-> Disabled.

Search