In this tutorial you will learn how to create a countdown timer in WordPress via simple, easy to use plugins. Such timers are especially useful when you want to create a scarcity mindset on users, in terms of a discount or a product that is on offer. Or even show it to users when under maintenance mode to give users an estimate after which the site will be back to operational mode.
With these plugins, we will see there best features as well as how to install and use them. With these you can also use them in pages, posts and sidebars and they do not require WooCommerce.
To create a countdown timer:
(a). Use countdown-timer-ultimate
It is a quick, easy way to add and display responsive Countdown timer on your website.
This plugin also works with Gutenberg shortcode block.
It allows you to create nice and functional Countdown timer just in a few minutes. Not only that but you can also use the created Countdown timer in your posts/pages.
= Complete shortcode with all parameters: =
[wpcdt-countdown id="1"]
- ID: [wpcdt-countdown id="1"] (timer id for which you want to display timer. This parameter is required.)
= Template code is =
<?php echo do_shortcode('[wpcdt-countdown id="1"]'); ?>
Here are it's main features:
- Fully Responsive WordPress Countdown timer.
- Ability to create unlimited Countdowns timer.
- Ability to create Countdown in pages/posts.
- Also work with Gutenberg shortcode block.
- Ability to change background color and width.
- Ability to change rotating circle background color and width.
- Option change the text of Days, hours, minutes and seconds OR show/hide Days, hours, minutes and seconds.
- Option to set difftent background colors for Days, hours, minutes and seconds.
- Elementor, Bevear and SiteOrigin, Divi, Fusion Page Builder Native Support.
Step 1: Install countdown-timer-ultimate
- Upload the 'Countdown Timer Ultimate' folder to the '/wp-content/plugins/' directory.
- Activate the "Countdown Timer Ultimate" list plugin through the 'Plugins' menu in WordPress.
- Add a new page and add desired short code in that.
Step 2: Use
You can use countdown-timer-ultimate as shown in the screenshots below:
Reference
Read more about countdown-timer-ultimate here
(b). Solution 2: Use Finale Woocommerce Sales Countdown-timer
This plugin lets you create scheduled one time or recurring campaigns.
It induces urgency with visual elements such as Countdown Timer and Counter Bar to motivate users to place an order.
You can use it to run scheduled sales campaigns such as flash sales, seasonal promotions, coupon code led discounts, pre-launch offers, daily deals, faster shipping deadline campaigns, instant discounts, early bird deals, recurring offers and more.
Here are its best features
- Set Up Sales Between Two Fixed Dates and Time
- Run a Countdown Timer to Give Shoppers a Clear Deadline for Action
- Set up a counter bar to show the real-time stock status
- Create rules to customize campaigns
Here are just a few use cases of Finale
- Set up Flash sales scheduled to start on a set date/time
- Create Seasonal offers scheduled to trigger on set dates
- Run Exclusive Happy Hour Deals that only last for a few hours
- Set up Store Anniversary/Birthday Specials that last for a day and end at 11:59 pm
- Run Store-wide campaigns or only setup product category-wide sales
- Run Exclusive Festive deals that last till the stock lasts and end once the inventory goal is met
- Feed your entire promotional calendar in one go
- Show the depleting stock size through a counter bar to sell limited stock products
Step 1: Install finale-woocommerce-sales-countdown-timer-discount
- Install "Finale - WooCommerce Sales Countdown Timer & Discount Plugin Lite" Plugin.
- Activate the Plugin.
- Go to XlPlugins -> Finale Lite
- Activate Campaign.
Step 2: Create Your Countdown Timer
You can use finale-woocommerce-sales-countdown-timer-discount as shown in the screenshots below:
Reference
Read more about finale-woocommerce-sales-countdown-timer-discount here
(c). Use widget-countdown
This is a nice tool to create and insert timers into your posts/pages and widgets.
It allows website owners to create nice and functional timer just in a few minutes. You can use this plugin in your posts/pages and widgets. It's very easy to use and there isn't any need of coding knowledge.
Demo page:
Here are some of the features you will find in the FREE version:
- Easy install and use
- Works perfectly with all versions of WordPress
- Fully Responsive
- Ability to create unlimited Timers
- Ability to use on pages/posts and widgets
- Ability to type your own text in day, hour, minute and second fields
- Ability to select the action after time expired
- Ability to type message after time expired
- Ability to choose the position
- Ability to type the distance from top/bottom
- Uses CSS3
- User friendly back-end
- Tested on popular WordPress themes
Step 1: Install widget-countdown
First download the plugin ZIP file.
- Log in to your administration panel.
- Go to Plugins page, click on Add New, then click "Upload Plugin" .
- Then click "Choose file" then select the plugin zip file.
- Install and activate our plugin.
That's all, now you can use it on your website.
Options
- Day field text - Type here text for Day field.
- Hour field text - Type here text for Hour field.
- Minute field text - Type here text for Minute field.
- Second field text - Type here text for Second field.
- Expire time/date - Type the expire time or select it from calendar.
- After time expired - Select the action after time expired.
- Message after time expired - Type the message after time expired.
- Position - Select the position.
- Distance from top - Type the distance from top.
- Distance from bottom - Type the distance from bottom.
- Buttons type - Select the buttons type.
- Text color - Choose the text color.
- Background color - Choose the background color.
- Size - Type the size.
- Border width - Type the border width(px).
- Border radius - Type the border radius(px).
- Font-size - Type the texts font-size(px).
- Font family - Choose the Font family.
- Animation type - Choose the animation type you need.
Step 2: Add to Page/Post/Sidebar
After installation activate the plugin, then go to your pages, posts and just click on our plugin shortcode button and add it to your pages/posts.
Adding in your website sidebar
After installation activate the plugin, then check your widgets page(Appearance>Widgets) and then drag and drop our plugin widget into your sidebar.
After that configure the options. That's all.
Reference
Read more about widget-countdown here
(d). sales-countdown-timer
This is a WooCommerce countdown timer that helps to motivate customers to purchase your products.
You can use it if you own an online Shop based on WooCommerce and WordPress. You can use it in sale events, promotions to boost sale, to improve sales and revenue. The plugin can display WooCommerce countdown timer any pages by shortcodes.
Here are its best features:
► WooCommerce Countdown Timer: The plugin displays sales countdown timers in single product pages and the shop page of WooCommerce.
- Select Sales Countdown Timer profile in WooCommerce single product page, variation products, and select Sales Countdown Timer for bulk products.
- Display countdown clock base on WooCommerce sale scheduled time
- Select specific sale time: WooCommerce allows you to schedule sale time by date. With Sale Countdown Timer you are able to select specific sale time by hours and minutes.
- Position in single product pages: select where the countdown clock will be displayed in single product pages.
- Position in archive pages: select where will the countdown click appear in archive pages like shop page, categories pages.
- 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 future, you can choose to display an upcoming sale message in the single product page.
- Sale ends message: display when will the sale finish message with the shortcode {countdown_timer}.
- Shortcode: the shortcode {countdown_timer} will display the countdown clock.
► Sale Progress bar ??? Stock quantity bar: The plugin displays a progress bar display how many products are available for the sale campaign, how many products are sold and how many 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 dicrease.
- Order status: select what order status that 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 frontend of the progress bar with options for width, height, background color, text color and border-radius.
► Shortcodes Countdown Timer:The plugin does not require WooCommerce to work. You can display countdown clocks anywhere by using shortcodes.
- 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.
► Design:Feel free to design the sales countdown timer to fit with your website 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 date item, hour item.
- Design the time value: time value includes the time number and unit. Custom it with font size, text color, and background color.
Step 1: Install sales-countdown-timer
- Unzip the download package
- Upload
sales-countdown-timerto the/wp-content/plugins/directory - Activate the plugin through the 'Plugins' menu in WordPress
Step 2: Use
You can use sales-countdown-timer as shown in the screenshots below:
Reference
Read more about sales-countdown-timer here or read the docs here