Add a Countdown Timer to WooCommerce Store Notice

Countdown timers are a visual way to create urgency and motivate purchases when running a sale on your ecommerce site. This blog post shows you step-by-step instructions to add a simple store notice with a WooCommerce countdown timer.

How to Add a Countdown Timer to WooCommerce Store Notice

Required Plugins Used In This Guide

For this tutorial, I’m using a basic WordPress site with the following theme and plugins:

  • WooCommerce: a WordPress ecommerce plugin
  • Blocksy: a WooCommerce compatible theme by Creative Themes
  • HurryTimer: a countdown timer plugin
  • Code Snippets: a plugin that adds PHP code recipes right in the WordPress admin.

There are loads of countdown timer plugins available for free in the WordPress.org plugin repository. I chose HurryTimer because it’s the plugin we use at Paid Memberships Pro when running our own sitewide sales.

On to the tutorial!

How To Add a WooCommerce Countdown Timer Store Notice

Time needed: 30 minutes.

This tutorial is a step-by-step walkthrough on how to create a new countdown timer in WordPress that displays in a sitewide banner or “Store Notice” in WooCommerce.

  1. In your WordPress admin, navigate to HurryTimer > Add Campaign.

    Enter a name to identify your timer. The name is only shown to you as the admin and helps you identify what this timer is for.Hurrytimer Admin Post Type > Add New Campaign

  2. Configure your timer’s end date and display settings.

    Set up a basic timer with a specific end date. After you configure other timer settings, click to save and publish the timer. Once your timer is published, HurryTimer displays a unique shortcode that you will need for a later step.
    Edit HurryTimer New Campaign

  3. In the WordPress admin, navigate to Snippets > Add New.

    Copy and paste the exact code from my example recipe at the bottom of this post. This code will load the content of your Store Notice and make sure that any shortcodes render on the frontend of your site.

    Once the code is added, click the button to “Save and Activate” the snippet. Phew. I knew you were a coder.Code Snippet Screenshot to Allow Shortcode in WooCommerce Store Notice

  4. Next, navigate to Appearance > Customize in the WordPress admin. This action opens the Theme Customizer feature of WordPress.

    Scroll to the bottom of the left column menu and choose WooCommerce. Then select “Store Notice”.Turn on WooCommerce Store Notice in WordPress Customizer

  5. Now you’re ready to set up the actual banner that will show on your WooCommerce site.

    First, check the box to “Enable store notice”. You’ll need this setting activated so you can preview the appearance of your notice.

  6. In the empty textarea, add some information about your sale and paste the shortcode from HurryTimer.

    Your store notice may look different depending on the WooCommerce theme used in your WordPress site. I’m using Blocksy by Creative Themes which has support for WooCommerce.

    If you aren’t ready to launch the banner on your store, uncheck the “Enable store notice” setting before you hit publish. I put a link in the video description with some tutorials on how to turn on the notice at a specific date and time. Or, you can come back and manually enable it when your sale begins.

    When you’re happy with your notice text, click “Publish” to update your site.Edit Store Notice in WordPress Customizer

  7. Go check out your site and countdown timer!

    You can now navigate to view your live site. You should see the store notice with the active countdown timer ticking away.

    If you want to make this a little prettier, I also included a few lines of copy and paste CSS that you can use to make your site look like this tutorial.Screenshot of the site with WooCommerce Store Notice and Countdown Timer

The Code Recipe

Adding the Recipe to Your Website

You can add this recipe to your site by creating a custom plugin or using the Code Snippets plugin available for free in the WordPress repository. We have a post on how to create a customizations plugin on our partner website, Paid Memberships Pro.

The Custom CSS

.woocommerce-store-notice .hurrytimer-campaign {
	margin-left: 20px;
}
.woocommerce-store-notice .hurrytimer-timer-block {
	background: rgba( 255, 255, 255, 0.1);
	padding: 5px 15px;
}
.demo_store a.woocommerce-store-notice__dismiss-link {
	background: none;
}

Add the Custom CSS To Your Site

  • If you’re already using a child theme, this CSS can be added directly to your child theme’s style.css file.
  • Or, navigate to Appearance > Customize.
  • In the Theme Customizer, locate the “Additional CSS” field.
  • Paste this CSS into the field.
  • Click “Publish” to push these changes to your live site.

Build Better Banner Ads with the Sitewide Sales Plugin for WooCommerce

This recipe shows a simple way to adjust your WooCommerce Store Notice and add a countdown timer. If you want to run a true sale that automatically starts and stops based on your start and end date, you need try the Sitewide Sales plugin—it works with WooCommerce and other popular ecommerce plugins for WordPress.

SHARE YOUR LOVE
Default image
Kim Coleman

Hi! I'm Kim Coleman, an internet entrepreneur from Reading, PA. I've been working with WordPress for over 15 years. In 2011, I founded Paid Memberships Pro, a complete plugin for Recurring Subscriptions and Content Restriction with 100k active sites. I'm currently working on our new product, Sitewide Sales.

Articles: 27