Pro Spending Discount Goal

The Spending Discount Goal module allows you to incentivize customers to spend more in your store by offering discounts when they reach a pre-defined spending threshold.

Key Features

  • Set a spending goal amount that customers must reach to qualify for the discount.
  • Choose between a percentage-based or fixed-amount discount.
  • Display a customizable widget on your site showing customers their progress towards the discount.
  • The discount is automatically applied on the Cart page when the goal is reached.

How the Module Works

  1. Define a spending goal amount (e.g. $100) and the discount customers will receive when they hit that goal (e.g. 10% off or $10 off).
  2. When active, the module displays a spending goal widget, which:
    • is positioned in the bottom-left corner of your site
    • shows the customer’s real-time progress to the goal as a percentage
    • calculates the percentage based on the total price of items in the cart
    • is clickable to expand and show motivational messages based on progress
  3. The widget updates in real time as the customer adds items to their cart.
  4. Once the spending goal is reached, the discount is automatically applied on the Cart page.

For example, in the screenshot below, the spending goal widget lets the customer know that they have already spent 39% of the pre-defined spending amount:

Frontend view of Merchant Pro's spending goal widget in closed state on a WooCommerce product page, annotated screenshot

The spending goal widget is clickable. You can show different messages inside the widget based on how far the customer is from the goal target.

For example, the test user below needs to spend $92 more to get a 10% discount:

Frontend view of the spending goal widget when it's open, annotated screenshot of a WooCommerce product page

The spending goal widget is visible on your entire website, not solely on the product and shop pages.

This includes your homepage, blog posts, archive pages, and all the other pages such as the Contact page:

The spending goal widget on a Contact page when it's closed, annotated screenshot

The screencast video below shows how the Spending Discount Goal module works when a customer adds new products to the cart.

As you can see, Merchant Pro updates the numbers inside the widget as the spent amount grows:

Once the customer reaches 100%, the Spending Goal discount will appear on the Cart page and Merchant Pro will automatically apply the discount to the subtotal:

Spending Goal discount deducted from the total amount on a WooCommerce Cart page, annotated screenshot

Below, we’ll see how you can set up and configure Merchant Pro’s Spending Discount Goal module on your WordPress site.

1. Open the Spending Discount Goal Module

Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

Find the Boost Revenue section, then click the Spending Discount Goal module to open its settings page:

Location of the Spending Discount Goal module on the Merchant dashboard, annotated screenshot of the WordPress admin area

2. Configure the General Settings

On the admin page of the Spending Discount Goal module, you can find three groups of settings:

  1. Settings
  2. Text Formatting Settings
  3. Style

In this step, we’ll discuss the Settings section, which includes the general settings of the module.

You can configure the following options:

  • Spending goal – Here, you can define the spending goal in the currency of your WooCommerce store (you can change the currency, e.g. from USD to EUR, from the WooCommerce > Settings > General > Currency options > Currency menu in your WordPress admin area).
  • Based on – This option lets you choose whether you want to calculate the discount from the Cart subtotal (excludes tax and shipping) or the Cart total (includes tax and shipping).
  • Discount type – Here, you can choose between percentage-based and fixed-amount discount types.
  • Discount amount – Here, you can define the amount of discount you offer.
  • Discount name – This is the name of the discount that will show up on your Cart page once the goal target is reached.
  • User Condition – Here, you can configure which users or user groups you want to show the widget for. The available options are All UsersSelected Users, and Selected Roles.
  • Enable Auto Slide In – This option allows you to make the spending discount goal widget slide in each time your customer adds a product to their cart.
Location of the Settings section on the Spending Discount Goal module's admin page, annotated screenshot

Once the settings are configured, click the Save button in the top-right corner of the page.

3. Configure the Text Formatting Settings

You can find the Text Formatting Settings section below the general Settings section.

Here, you can configure the messages that Merchant Pro shows your customers at the three different stages of the discount process, respectively:

  • When the goal target is at 0%Default message: “Spend {spending_goal} to get a {discount_amount} discount!”
  • When the goal target is between 1-99%Default message: “Spend {spending_goal} more to get a {discount_amount} discount!”
  • When the goal target is at 100%Default message: “Congratulations! You got a discount of {discount_amount} on this order!”

In the text of the messages, you can use the {spending_goal} and {discount_amount} variables to dynamically insert the values of the Spending goal and Discount amount options you defined in the previous step:

Location of the Text Formatting Settings of the module, annotated screenshot

Once the text formatting settings are configured, hit the Save button in the top-right corner of the page again.

4. Customize the Design of the Spending Goal Widget

The Style settings are below the Text Formatting Settings on the module’s admin page.

You can customize the following options:

  • Gradient start – This is the background color of the top area of the spending goal widget (default value: #5e5e5e).
  • Gradient end – This is the background color of the bottom area of the spending goal widget (default value: #212121). If you don’t want to show a gradient, set Gradient start and Gradient end to the same color.
  • Progress bar color – Here, you can change the color of the progress bar inside the widget (default value: #d83a3b).
  • Content width – This is the width of the widget when it’s open (default value: 300 px).
  • Content background color – Here, you can customize the background color of the widget when it’s open (default value: #f9f9f9).
  • Content text color – Here, you can customize the color of the text inside the widget when it’s open (default value: #3c434a).
Location of the Style settings of the module, annotated screenshot

Once you have customized the style of the widget, click the Save button in the top-right corner of the page.

5. Enable the Spending Discount Goal Module

To activate the module, click the Enable button at the top of the module’s page:

Location of the Enable button on the module's admin page, annotated screenshot