Sales Countdown Timer

Created: 08/2018

Latest update: 07/2025 – Updated to Sales Countdown Timer version 1.1.7

By: VillaTheme

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

FILE INCLUDES

INTRUCTION

WooCommerce countdown timer helps to motivate customers to purchase. Many shop owners use WooCommerce countdown timer in sale events, and promotions to boost sales, and improve traffic and revenue.  Let’s find out the WooCommerce countdown timer plugin from VillaTheme.

Sales Countdown Timer is a plugin that allows shop owners to increase sales in Sale Campaigns. Using shortcodes, the plugin can display a WooCommerce countdown timer on any page. It is a must-have plugin for encouraging customers to buy by instilling a sense of urgency in them.

 

Plugin main’s feature.

WooCommerce Countdown timer

The plugin displays sales countdown timers on single product pages and the shop page of WooCommerce. The clocks will notify customers when the sales end or how many sale product quantities are left. In WooCommerce single product, you can select Sales Countdown Timer settings and schedule sale campaigns.

  • Select Sales Countdown Timer profile in WooCommerce single product page, variation products, and select Sales Countdown Timer for bulk products.
  • Display countdown clock based on WooCommerce sale scheduled time.
  • Select specific sale time. WooCommerce allows you to schedule sale time by date. With Sale Countdown Timer you can select specific sale times by hours and minutes.
  • Position on single product pages: select where the countdown clock will be displayed on single product pages. There are many options for you to select: before product price, after product price, before the sale flash badges, after the sale flash badges, before the “Add to cart” button, after the “Add to cart” button, in the product picture.
  • Position in archive pages: select where will the countdown click appears in archive pages like the shop page, and categories pages. There are many options for you to select: before product price, after product price, before sale flash badges, after the sale flash badges, before the “add to cart” button, after the “add to cart” button, in the product picture.
  • Display in shop page, categories page, related products: you have options to choose display or hide the countdown clock on these pages.
  • Upcoming sale message: When you schedule a sale campaign in the future, you can choose to display an upcoming sale message on the single product page. The messages can be customized with a shortcode display of how much time is left until the sale time.
  • Sale ends message: display when will the sale finish the message with the shortcode {countdown_timer}.
  • Shortcode: the shortcode {countdown_timer} will display the countdown clock.

Sale Progress bar – Stock quantity bar

The plugin integrates a progress bar that displays how many products are available for the sale campaign, how many products are sold, and how many are left.

  • Progress bar message: Configure the sale progress bar message as you want with shortcodes.
  • Shortcodes:
    {quantity_left} – Number of products left
    {quantity_sold} – Number of products sold
    {percentage_left} – Percentage of products left
    {percentage_sold} – Percentage of products sold
    {goal} – The goal that you set on the single product page
  • Progress bar type: select to display the sale progress as increase or decrease.
  • Order status: select what order status will be counted in the progress bar.
  • Position: there are 2 positions for the sale progress bar above the countdown clock and below the countdown clock.
  • Design: configure the front end of the progress bar with options for width, height, background color, text color, and border radius.

Shortcode Countdown Timer

The plugin does not require WooCommerce to work. You can display countdown clocks anywhere by using shortcodes. Settings for Countdown Timer shortcode are similar to the WooCommerce Countdown Timer, the difference is that WooCommerce Countdown Timer displays WooCommerce sale time, and the Countdown Timer shortcode displays your chosen time. You can learn how to use shortcode to create a sale countdown timer here

  • Display countdown timer by shortcodes.
  • Select countdown time in the plugin backend.

Multiple setting profiles

The plugin allows you to set up as many Countdown Timer profiles as you want. Each profile is completely a standalone Sales Countdown Timer. With each profile, you can set up full settings including General settings, Design settings.

Checkout countdown timer

  • Set the checkout countdown timer for a minimum cart total to get a special offer.
  • The reset mode will be applied only to Administrators for testing purposes.
  • Reset checkout countdown for a cart after this time if the customer does not place the order during the checkout countdown.
  • Give offers before the checkout countdown timer hits zero: Free shipping and/or discount amount (percentage/fixed amount).
  • Integrates options that allow you to change offers when the countdown timer hits specific values.
  • Assign pages where the checkout countdown timer shows up.
  • Design the checkout countdown timer on the checkout page and other assigned pages.

Design

Feel free to design the sales countdown timer to fit with your front end.

  • Time display: select the time separator style and time format style.
  • Countdown timer clock design: configure front-end style with text color, background color, border color, padding, and border-radius.
  • Countdown timer item design: design the items inside the countdown timer, such as the date item, and hour item.
  • Design the time value: time value includes the time number and unit. Customizing it with font size, text color, and background color.

INSTALLATION

System Requires:

Make sure that those limits to a minimum as follows in order for free-trouble while installing:

  • WordPress 5.0+
  • PHP 7.0+
  • WooCommerce 7.0+

Download Plugin:

Go to Plugin/Add New/Upload Plugin/Choose file/ select plugin zip file sale-countdown-timer /click “Install Now“/click “Active plugin“.

Done! Let’s start using the plugin.

Guiding video on how to install and set up:

HOW TO USE

WooCommerce Sales Countdown Timer

To use the WooCommerce Sales Countdown Timer feature, you need to configure a Sale Countdown Timer profile in Dashboard/ Countdown Timer then assign that profile to a product.

Set up a Sales Countdown Timer with General Settings, Design and WooCommerce Product settings. We will discuss more details about these settings in How does it work chapter.

After configuring settings, go to any product edit page to assign the Sales Countdown Timer to that product.

In a single product edit page,you need to assign a Sales Countdown Timer profile to that product.

  1. Regular price: Enter the regular price of the product
  2. Sale price: Enter the sale price of the product
  3. Sale price dates and times: Enter the sale dates and times for above the sale price. With these time installed, Sales countdown timer plugin runs the sales countdown timer on the product.
  4. Countdown evergreen: Enable this option to make the countdown loops when it ends
  5. Restart countdown after: If “Countdown evergreen” enabled, how long the countdown timer restarts after it ends
  6. Countdown Timer profile: Allows you to choose a countdown timer profile which was created and designed at the above step. Select the profile you want to assign to this product there.
  7. Enable the progress bar: Check on it to display how many products are left in your sale campaign.
  8. When achieving the goal: When the sale countdown is over, turn to respective status: None; Back to regular price; Private product; Out of stock.
  9. Goal: Enter the total sale products you want to sell in this campaign.
  10. Initial quantity: Enter the initial quantity when the sale campaign starts.

To set bulk sales countdown timer for variable products:

Set the sale time for variable products: Go to any variation product page/Product data/ Variation and set sale time for the variations you want.

1. Enter sale price for each variation of variable product.

2. Schedule time for sales countdown timer: sale start date and sale time date.

3. Check on for enabling Countdown evergreen.

4. Choose the countdown timer profile.

To change the sales countdown timer profile, price… for many variations,  go to Products/ All products/ filter Variable products, then select the variable products that you want to bulk set sales countdown timer.

In the Bulk Actions field select Edit/ Apply, then you can set bulk sales countdown timer for the variable products.

Sales Countdown Timer Shortcode

This plugin supports 2 shortcodes which:

A. Display a countdown timer

B. Display a list of products with active sale countdown timers

A. Shortcodes to display a sale countdown timer on any page

If the start date/time for the timer linked to the shortcode is set in the future, the timer will not be visible on the frontend. To display a countdown for an upcoming sale (i.e., a countdown to the sale start time), add this parameter to the shortcode: countdown_upcoming_enable

E.g. [sales_countdown_timer id="salescountdowntimer" countdown_upcoming_enable="1"]

Steps to get the countdown timer shortcode:

  1. Go to Dashboard >> Countdown Timer >> Select the countdown timer you want to dipslay
  2. Hover your mouse over the above corner on the right and copy the countdown timer shortcode by the button “Copy shortcode”
  3. Paste the shortcode to any pages
  4. Then the countdown timer will appear on the front-end.

B. The shortcode to display a list of products with active sale countdown timers

Besides, we support a shortcode to display all products which have sale countdown timers: [sales_countdown_timer_list]

 

HOW DOES IT WORK

COUNTDOWN TIMER

General Settings

In the General settings tab of the Countdown timer, you can add new or remove the Sales Countdown Timer profile.

  1. These buttons will appear when you hover your mouse over the header of the Sale Countdown Timer plugin.
    Copy shortcode: Copy the shortcode to display the countdown timer on the pages you want.
    Duplicate: Duplicate this Sale Countdown Timer profile.
    Remove: Delete this Sale Countdown Timer profile.
  2. The Sale Countdown Timer profile name. Enter a name for new countdown timer profile then you can find the sales countdown profile when selecting on the single product page.
  3. Schedule time: Set the time countdown schedule for your sales campaign.
  4.  Countdown evergreen: Enable this option to make the countdown loops when it ends.
  5. Restart countdown after: If “Countdown evergreen” enabled, how long the countdown timer restarts after it ends.
  6. Choose the time unit for restarting  the countdown.

Design

In Design settings, you can configure how the sales countdown timer looks like in front-end.

  1. Message: The main message displayed along with the countdown timer (e.g., “Sale ends in:”).
  2. Shortcode upcoming message: Message shown when the countdown hasn’t started yet (before the start date/time)
  3. Shortcode time elapsed message: Message shown after the countdown has ended
  4. Reduce the size of countdown timer on: Option to make the timer smaller when shown on Product list (archive/shop pages); Mobile devices; and Sticky countdown (if enabled)
  5. Display type: Choose the layout style of the countdown
    • Square Countdown Timer
    • Square Countdown Timer 1
    • Basic Countdown Timer
    • Circle Countdown Timer: Toggle “Use smooth animation for circle” for a better experience.
    • Circle Countdown Timer 1: Toggle “Use smooth animation for circle” for a better experience
    • Sleek Countdown Timer
    • Sleek Countdown Timer 1
  6. Message position: Choose where the message appears relative to the timer – Default or on the same line as the countdown timer
  7. Time units: Select which time units to display on the timer: Day, Hour, Minute, Second
  8. Time separator: Choose the symbol or character to separate time units (e.g., :,)
  9. Datetime format style: Define how the date are shown on the timer
  10. Animation style: Choose animation for the countdown clock (e.g., Slide, 3D Flip – only works with Sleek Countdown Timer and Sleek Countdown Timer 1, Default).
  11. Countdown timer preview: Instantly preview how your timer will look with current settings and reset the default settings using the “Reset” button
  12. Style only shortcode
    • Shortcode position: Define where the timer appears when using the shortcode in content
      • Default: Exactly where the shortcode is inserted
      • Site static top banner
      • Sticky on top
      • Sticky on bottom
    • Background image: Add a background image behind the countdown block
  13. Style
    • Color: Text color of the timer
    • Background: Background color of the countdown block
    • Border color: Color of the border around the countdown
    • Fontsize: Size of the timer’s text
    • Border radius: Rounded corners for the countdown block
    • Padding: Spacing inside the countdown block
  14. Style on sticky
    • Set width 100% on sticky: Make the sticky countdown stretch full width
    • Hide datetime unit on sticky: Enable to remove labels like “days”, “hours” from sticky countdown for compact display
    • Color: Adjust the text color of the sticky timer
    • Background: Adjust the background color of the sticky timer
    • Border color: Adjust the border color of the sticky timer

 

Datetime value and Datetime unit settings are Display type-specific (5). Scroll down to learn the options for each type.

Square Countdown Time

  • Datetime value
    • Color: Text color for datetime values
    • Background: Background color for datetime boxes
    • Border color: Border color for datetime boxes
    • Font size: Font size of datetime values
    • Border radius: Rounded corners of each datetime box
    • Height: Set the height for the time unit block
    • Width: Set the width for the time unit block
  • Datetime unit
    • Position: Placement of unit labels
    • Color: Text color for datetime unit
    • Background: Background color of unit labels
    • Font size: Font size of the unit labels

 

Square Countdown Timer 1

  • Datetime value
    • Color: Text color for datetime values
    • Background: Background color for datetime boxes
    • Font size: Font size of datetime values
  • Datetime unit
    • Position: Placement of unit labels
    • Color: Text color for datetime unit
    • Background: Background color of unit labels
    • Font size: Font size of the unit labels

 

Basic Countdown Timer

  • Datetime value
    • Color: Text color for datetime values
    • Background: Background color for datetime boxes
    • Font size: Font size of datetime values
  • Datetime unit
    • Color: Text color for datetime unit
    • Background: Background color of unit labels
    • Font size: Font size of the unit labels

 

Circle Countdown Timer

This style displays each time block (e.g., days, hours) inside a circular timer. The circle’s outer border represents the total time (100%), and it visually fills as time passes:

  • Datetime value
    • Color: Text color of the datetime values inside each circle
    • Border color 1: The initial circle outline – the full ring
    • Border color 2: The active color that fills over Border Color 1 as time decreases – gradually fills over Color 1 to indicate remaining time
    • Font size: Size of the datetime value text
    • Border width: Thickness of the circle border line
    • Diameter: Total size (height/width) of each circular time block
  • Datetime unit
    • Position: Placement of unit labels
    • Color: Text color for datetime unit
    • Background: Background color of unit labels
    • Font size: Font size of the unit labels

 

Circle Countdown Timer 1

This type shows each countdown timer item (date, hour, minute, second) in a circle block just like Circle Countdown Timer, but with individual style settings for each unit. Each time unit (Date, Hour, Minute, Second) can be styled with its own colors. The circle border visually fills as time progresses – similar to a progress ring.

  • Countdown timer items
    • Datetime value color: Text color of the numeric value inside each circle (e.g., 10, 24)
    • Datetime unit color: Text color of the unit label
    • Border width: Thickness of the circle ring around each time block
    • Diameter: Total size (width/height) of each circular timer block
    • Datetime value font size: Font size of the numeric value
    • Datetime unit font size: Font size of the unit label
  • Countdown timer date
    • Border color 1: Base ring color
    • Border color 2: Fills over color 1 as time passes
    • Background: Background color inside the circle
  • Countdown timer hour
    • Border color 1: Base ring color
    • Border color 2: Fills over color 1 as time passes
    • Background: Background color inside the circle
  • Countdown timer minute
    • Border color 1: Base ring color
    • Border color 2: Fills over color 1 as time passes
    • Background: Background color inside the circle
  • Countdown timer second
    • Border color 1: Base ring color
    • Border color 2: Fills over color 1 as time passes
    • Background: Background color inside the circle

 

Sleek Countdown Timer

This countdown timer style features a clean, split layout, where each time block (e.g., hours, minutes, seconds) is divided into two distinct halves by a horizontal dividing line if enabled.

  • Datetime value
    • Color 1: Text color for the top half of each datetime value
    • Color 2: Text color for the bottom half of each datetime value
    • Background 1: Background color of the top half of each time unit block
    • Background 2: Background color of the bottom half of each time unit block
    • Width: Width of each time unit block
    • Height: Height of each time unit block
    • Border radius: Adjust the roundness of each time unit block’s corners
    • Fontsize: Size of the text used for datetime values (both top and bottom halves)
    • Enable box shadow: Toggle to add a subtle shadow around each time unit block for depth and emphasis
    • Show dividing line behind datetime value: Enable this to display a horizontal line, creating a layered effect
    • Dividing line color: Choose the color of the dividing line that separates the top and bottom halves
  • Datetime unit
    • Position: Choose where the unit label appears relative to the time value
    • Color: Text color of the datetime unit
    • Fontsize: Size of the unit label text
    • Distance to time value: Adjust the spacing between the unit label and the datetime value block

 

Sleek Countdown Timer 1

  • Datetime value
    • Color 1: Text color for the top half of each datetime value
    • Color 2: Text color for the bottom half of each datetime value
    • Background 1: Background color of the top half of each time unit block
    • Background 2: Background color of the bottom half of each time unit block
    • Width: Width of each time unit block
    • Height: Height of each time unit block
    • Border radius: Adjust the roundness of each time unit block’s corners
    • Fontsize: Size of the text used for datetime values (both top and bottom halves)
    • Dividing line color: Choose the color of the dividing line that separates the top and bottom halves
  • Datetime unit
    • Position: Choose where the unit label appears relative to the time value
    • Color: Text color of the datetime unit
    • Fontsize: Size of the unit label text
    • Distance to time value: Adjust the spacing between the unit label and the datetime value block

 

 

WooCommerce Product Settings

Under Dashboard >> Countdown Timer, you can configure to display the Sales Countdown Timer on WooCommerce pages.

  1.  Countdown timer on the single product page: Enable or disable the countdown timer display on individual product pages.
    • Position: Choose where the countdown timer appears on the single product page
      • Before price
      • After price
      • Before sale flash
      • After sale flash
      • Before cart
      • After cart
      • Product image
    • Sticky when scrolling: Keeps the countdown timer visible and fixed on the screen as customers scroll down the page.
      • None
      • Sticky top
      • Sticky bottom
    • Show “Add to cart” button on sticky countdown: Display the “Add to Cart” button along with the sticky countdown for easier purchasing
    • Wrap Border radius: Sets how rounded the outer corners of the countdown timer container are
    • Wrap Border color: Choose the color of the border surrounding the countdown timer container
  2. Countdown timer on Shop page: Enable or disable the countdown timer display on the main shop or archive pages.
    • Enable: Turn the countdown timer on or off for the shop page.
    • Show on: Use WordPress conditional tags to control which product listings display the countdown timer.
    • Position: Select where the countdown timer appears within each product card on the shop page.
      • Before price
      • After price
      • Before sale flash
      • After sale flash
      • Before cart
      • After cart
      • Product image
  3. Progress bar: Show a visual progress bar along with the countdown to indicate the promotion’s status or urgency.
    • Progress bar message: Text message displayed above or near the progress bar to give context. Supported placeholders are:
      • {quantity_left} – Number of products left
      • {quantity_sold} – Number of products sold
      • {percentage_left} – Percentage of products left
      • {percentage_sold} – Percentage of products sold
      • {goal} – The goal that you set on single product
    • Progress bar type: Choose whether the progress bar increases or decreases over time or based on quantity sold.
    • Order status: Specify which order statuses will count towards the progress bar (e.g., completed, processing).
    • Position on shop page: Choose the location of the progress bar on the shop page
      • Below Countdown
      • Above Countdown
    • Message position on shop page: Choose where the progress bar message appears on the shop page
      • Above Progress Bar
      • Below Progress Bar
      • Left Progress Bar
      • In Progress Bar
      • Right Progress Bar
    • Position on single product page: Decide where the progress bar appears on the single product page.
      • Above Countdown
      • Below Countdown
      • Left Countdown
      • Right Countdown
    • Message position on single product page: Set the position of the progress bar message on the product detail page.
      • Above Progress Bar
      • Below Progress Bar
      • Left Progress Bar
      • Right Progress Bar
      • In Progress Bar
  4. Progress bar preview: Displays a live preview of the progress bar. Any changes made to the progress bar settings will be reflected here instantly.
    • Background: Choose the background color of the progress bar track (the empty portion).
    • Color: Select the fill color of the progress bar (the active portion that progresses).
    • Message color: Set the text color of the message displayed with the progress bar.
    • Width: Adjust the width of the progress bar.
    • Height: Adjust the height of the progress bar.
    • Font size: Set the font size of the progress bar message.
    • Border style: Choose a style for the border
      • None
      • Dotted
      • Dashed
      • Solid
      • Double
      • Groove
    • Border radius: Set the curve of the progress bar’s corners.
    • Border width: Define the thickness of the progress bar border.
    • Border color: Choose the color for the progress bar’s border.
  5. Upcoming sale: Settings for showing a countdown to future sales.
    • Enable: Turn on/off the countdown for upcoming sales.
    • Progress bar: Show a progress bar – settings above
    • Upcoming sale message: Customize the message for upcoming sales. You can use the {countdown_timer} shortcode to dynamically display the remaining time (e.g., “Sale starts in {countdown_timer}”).

 

 

CHECKOUT COUNTDOWN

General settings

In the general setting of the checkout countdown, you can set the checkout countdown timer for a minimum cart total to get a special offer.

 

  1. Enable: Enable to activate the option.
  2. Reset countdown: Enter the number of days and after this time the countdown checkout timer will be reseted if customers does not place order during checkout countdown.
  3. Countdown time: The maximum valid time that this offer bellow is applied. When the timer hits zero, the offer will be gone.
  4. Starting condition: The action at which starting a checkout countdown if a cart is eligible to get an offer. It can be when adding to cart;  To checkout page; To cart page.
  5. Min cart total: minimum in cart total to get an offer.
  6. Checkout countdown offer: Customers will get free shipping before the checkout countdown timer hits zero.
  7. Discount amount: Customers will get discount amount (percentage/fixed amount) before the checkout countdown timer hits zero.
  8. Level discount: choose Auto change mode when you want the discount amount will autochange if the countdown timer hits specific values.
  9. Change discount every: Enter a duration for changing discount.
  10. Decrease discount amount: Enter the percentages you want to decrease after the countdown timer hits specific values.
  11. Test mode: The checkout countdown will be applied only to Administrators for testing purposes.
  12. Reset checkout countdown: Reset current checkout discount applied to your account when the Test mode is enabled.

 

  • Customize the offer: Create your own levels that you want to change the offer, the message can be customized for each level

 

  1. Choose the Custom mode for using Level discount.
  2. Custom checkout countdown for each level as you want: time for each level, message on checkout page, message on other pages, offer free shipping or not, discount amount.

* You can duplicate the custom checkout countdown level to add other countdown levels.

Display checkout countdown

This setting allows you to design the checkout countdown and assign pages the checkout countdown will show up.

  1. Display countdown timer on: Select pages to show checkout countdown. Leave blank to show checkout countdown on all pages. Other than specific pages supported:
    • Checkout page
    • Cart page
    • Shop page
    • My Account page
    • Home page
    • Single product page
    • Category page
    • You can display checkout countdown on a specific page using “Other Page” option with conditional tags or URL
  2. Design checkout button on checkout countdown timer: Title, Font size, text color, background.
  3. Design shop button on checkout countdown timer: Title, Font size, text color, background.
  4. Test mode: Enable it to make the checkout countdown to apply to only Adminstrators for testing purpose.
  5. Reset checkout countdown: Reset current checkout discount applied to your account when test mode is enabled.

Design on Checkout page

This setting allows you to design the checkout countdown timer on the checkout page. 

  1. Checkout countdown message: Customize the message that appears on the countdown timer on the checkout page.
  2. Message if missing offer: Customize the message appearing on the countdown timer on the checkout page if the offer is going to be over.
  3. Shortcode available: Customize the text message in the countdown timer on the checkout page.
  4. Position: Put the position of the countdown timer on the checkout page.
  5. Select countdown timer: Select the countdown timer profile that you created to show up on the checkout page.
  6. Action after finish countdown: When it’s done counting down on Checkout page, make the whole Checkout page refresh or only refresh the order review, to update product price without discount.
  7. Test mode: Enable it to make the checkout countdown to be applied only to Administrator for testing purpose.
  8. Reset checkout countdown: Reset current checkout discount applied to your account when Test mode is enabled.

Design on other page

This setting allows you to design the checkout countdown timer on the other page.

1. Checkout countdown message: Customize the message that appears on the countdown timer on an assigned page.

2. Message if missing offer: Customize the message appearing on the countdown timer on the assigned page if the offer is going to be over.

3. Shortcode available: Customize the text message in the countdown timer on the assigned page.

4. Position: Put the position of the countdown timer on the assigned page.

5. Select countdown timer: Select the countdown timer profile that you created to show up on the assigned page.

6. Test mode: The checkout countdown will be applied only to Administrators for testing purpose

7. Reset check out countdown: Reset current checkout discount applied to your account when Test mode is enabled

Report

Go to Dashboard/Countdown Timer/ Checkout Countdown/ Report 

  1. Save Logs: If you enable save Logs, then Logs will be saved. Save logs helps system stores information when visitors click on the checkout countdown timer. Then admin site could have
    statistics of number clicks and analysis fluctuation sales. Report system allows to view statistic number clicks by clicking checkout button, orders on sale countdown and orders.
  2. History time: the time that history will be kept.
  3. Test mode: Enable it for only testing purpose.
  4. Reset checkout countdown: Click to reset checkout discount applied to your account when Test mode is enabled.

COMPATIBILITY

 

Plugin Author Compatible
WooCommerce Subscription v3.0.7  WooCommerce
Elementor for shortcode Elementor Fully
WPML OnTheGoSystems Fully
Polylang WP SYNTEX Fully

 

Watch this tutorial to set up Sales Countdown Timer for WooCommerce and WordPress with multilingual plugin

 

 

Extra Information

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.