Pro Countdown Timer

The Countdown Timer module allows you to show a countdown timer when you have discounted products in your WooCommerce store.

The countdown timer creates a sense of urgency in your visitors and, as a result, it may increase your conversion rate.

In the screenshot below, you can see what it looks like on a WooCommerce product page:

Frontend view of the Countdown Timer module on a WooCommerce product page

The screencast video below shows how the countdown timer works in action:

Let’s see how to set up and activate Merchant Pro’s Countdown Timer module.

1. Create a Discounted Product

To discount a product in WooCommerce, open the product page of the item. Scroll down to the Product data section, open the General tab, fill in the Sale price and Sale price dates fields, and update the product:

Location of the 'Sale price' and 'Sale price dates' options on the admin part of a WooCommerce product page, annotated screenshot

2. Open the Countdown Timer Module

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

Find the Convert More section, then click the Countdown Timer module to open its settings page:

Location of the Countdown Timer module on the Merchant dashboard, annotated screenshot of the WordPress admin area

3. Configure the Settings of the Countdown Timer

On the module’s admin page, find the Settings section and configure the following options:

  • Display on discounted products only – Here, you can choose whether you want to show the countdown timer on all of your product pages or only for your discounted products.
  • Sale ending message – This is the message that Merchant Pro will display next to the timer.
  • Cool off period (minutes) – This is the time period after which the countdown will restart.
  • Minimum expiration deadline (hours) – Here, you can define the number of hours before the end date (set by the Maximum expiration deadline option) when the timer will disappear from the product pages. Its value can be zero.
  • Maximum expiration deadline (hours) – This is the end date when the countdown will reach 00:00:00.

Note that the Cool off period, Minimum expiration deadline, and Maximum expiration deadline fields are based on a cookie that Merchant adds to your visitor’s browser, which will be different for each visitor. These three time values are not calculated based on the Sale price date you set in WooCommerce in Step 1, but on the point in time when a visitor first lands on your website.

An example of the countdown workflow

Let’s see what the countdown looks like using the default settings (which you can also see in the screenshot below):

  1. The visitor lands on your website.
  2. Merchant Pro adds a cookie to their browser and the countdown timer immediately appears on your product pages.
  3. As the Maximum expiration deadline is set to 26 hours, the countdown will start at 1 day 02:00:00.
  4. As the Minimum expiration deadline is set to 2 hours, the timer will disappear 24 hours after the visitor landed on the website, when the countdown is at 0 day 02:00:00. (If you want to show the timer until the countdown ends, you need to set Minimum expiration deadline to 0 hours.)
  5. As the Cool off period is set to 15 minutes, the timer will re-appear on your product pages 1 day 2 hours and 15 minutes after the visitor first landed on your site. The countdown will start again at 1 day 02:00:00. (The goal of this setup is to create a sense of scarcity.)
Location of the Settings section of the Countdown Timer module, annotated screenshot

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

4. Customize the Style of the Timer

You can find the Style options of the Countdown Timer module below the Settings section.

While Merchant Pro provides you with good-looking default style options, you can change the alignment of the timer and the colors of the clock icon, the sale ending message text, and the digits:

Location of the Style settings on the admin page of Merchant Pro's Countdown Timer module, annotated screenshot

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

5. Enable the Countdown Timer Module

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

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