Display Discounts on WooCommerce Product and Cart Page
By: Varsha Varghese
Tags: Woocommerce Plugins, Ecommerce, Discount, Woocommerce, Woocommerce Store

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.

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,

Here is the screenshot of how it looks in the 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.

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,

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

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,

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,

Here is the screenshot of how it looks in the 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,

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

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,

Here is the screenshot of how it looks in the 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,

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,

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,

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

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,

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,

Screenshot of how it looks after total,

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

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

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.

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.

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

— Enable Promotion Message Step2 — Create Subtotal based cart rule

— Create Subtotal based cart rule Step3 — Customize your message

Step1 — Enable promotion message:

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

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,

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,

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,

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,

Here is the screenshot of the product page,

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.

This post originally appeared on Flycart Blog.