How to setup sales countdown timer for WooCommerce

Smart coupon for WooCommerce, an extended coupon plugin will allow you to set up a stunning sales countdown timer in banner/widget display formats. Do you want to have a countdown timer as the ones displayed below? Then, read on to know how it can be achieved for your WooCommerce store.

WooCommerce sample coupon banner-Sales countdown timer

Sample coupon banners in banner format

WooCommerce sample Coupon Banner as widgets-Sales countdown timer

Sample coupon banners in widget format

Countdown timer/Coupon banner for WooCommerce

The plugin allows you to embed coupon banner/ countdown timer in your store in two ways. Either by inserting the short-code manually into any of your pages or automatically by using the configuration option “Inject coupons”. Although, both the ways will ensure a coupon banner announcing the offer to your visitors.

Checkout the tutorial to know how sales countdown timer can be setup in your WooCommerce store.

Creating a basic coupon

First of all, install and activate the plugin. Then, begin by creating a simple coupon offering a 20% discount with an expiry date. In addition, you can provide other properties for the coupon from the usage restrictions tab, usage limits tab, checkout options, giveaway products, or purchase history tab to behave in specific manners.

Smart coupon for WooCommerce-Countdown timer coupon

Smart coupon for WooCommerce-Countdown timer coupon

Customize and inject the coupon

Next, let us see how the above-created coupon can be displayed as a banner/widget in the front end of your site. For that, navigate to the settings > coupon banner tab.

Smart coupon for WooCommerce-Coupon Banner

Smart coupon for WooCommerce-Coupon Banner

The coupon banner window displays a coupon banner template and each item in the coupon banner can be customised from the configuration panel placed on the right side of the window. The changes done in the customisation panel are simultaneously reflected in the sample coupon banner template. The various customisation options for the coupon banner/widget as shown below.

Smart coupon for WooCommerce-Coupon Banner-Customization panel

Smart coupon for WooCommerce-Coupon Customisation panel

Each option of the customisation panel can be toggled to control its visibility. You can click on the expand button against each option to load its customisation properties.

Show as Banner or Widget

Smart coupon for WooCommerce-Coupon Banner-Customization panel-Show as

Smart coupon for WooCommerce-Coupon Banner Settings

The show as option consists of following fields:

  • Type: Select a banner or widget by choosing the appropriate option from the Type drop-down.
  • Position
    • On choosing the banner type, you can position the banner to be either top or bottom of the page.
    • On choosing the widget type, you will get additional options to place the widget on the top left, top right, bottom left, bottom right or even provide custom height and width to position the widget.
  • Background/Border Color: Choose an appropriate color for the banner from the color palette.
  • Dismissable: Select the checkbox to have a dismissable close button for the banner. On enabling, you will get an option to choose the dismissable button color.
  • Action on clicking banner
    • Apply coupon: On clicking the banner, the coupon will be auto-applied.
    • Redirect to URL: On choosing to redirect to a custom URL on click, an additional field to specify the redirection link will be appended. You can even choose the link to be opened in a new tab.

Title

You can key in with a suitable title for the coupon banner that should appear on the banner along with its font size and text color.

Smart coupon for WooCommerce-Coupon Banner-Customization panel-Title

Smart coupon for WooCommerce-Coupon Banner Settings

Short description

You can key in with a short description for the coupon banner that should appear on the banner along with its font size and text color.

Smart coupon for WooCommerce-Coupon Banner-Customization panel-Short Description

Smart coupon for WooCommerce-Coupon Banner Settings

Coupon timer

A real-time coupon countdown timer will be displayed on the coupon banner on the basis of the coupon expiry date. Its font size, text color, border color, and background color can be adjusted from this panel.

Note: It is to be noted that the coupon must be configured with an expiry date for the countdown timer to be displayed in the banner.

Smart coupon for WooCommerce-Coupon Banner-Customization panel-Timer

Smart coupon for WooCommerce-Coupon Banner Settings

In addition, you can choose action on coupon expiry either to hide the banner or to simply display the text as it is.

Display coupon

The font size, text color, border color and background color of the coupon code that is displayed on the banner can be adjusted from this panel.

Smart coupon for WooCommerce-Coupon Banner-Customization panel-Display

Smart coupon for WooCommerce-Coupon Banner Settings

Inject coupon

By enabling the Inject coupon automatically checkbox, the system will automatically embed a coupon banner In the specified pages. You must associate a coupon and also specify the pages where you need the coupon banner to be displayed. The style/layout will be set as is in the configuration panel.

Smart coupon for WooCommerce-Coupon Banner-Customization panel-Inject Coupon

Smart coupon for WooCommerce-Coupon Banner Settings

On applying the changes, you can view a customised coupon banner in the front end as shown below:

Smart coupon for WooCommerce-Countdown timer coupon in the front end

Smart coupon for WooCommerce-Countdown timer coupon in the front end

You can see the coupon banner with a real-time count down timer in it. On clicking the banner you can opt for the coupon to get applied directly on your cart amount or to redirect to a particular URL as per the underlying settings configured for the banner.

Using shortcode for banners/countdown timers

You can use shortcodes to set up a coupon banner on your website. This can be done by embedding the shortcode manually into any of your pages announcing the offer to your visitors.

To achieve this, simply place the shortcode in the prescribed format [wt_smart_coupon_banner coupon_id=xxx] within the respective page to display the default coupon banner. coupon_id is the post id of the coupon(created prior via Woocommerce->Coupons).

Alternatively, you can pass specific arguments/parameters along with the shortcode to override the default coupon banner appearance. Some of the predefined arguments that can be used along with shortcodes are defined below.

Example:

  • Shortcode for default banner layout
    [wt_smart_coupon_banner coupon_id=2828]
    Displays the banner for the coupon id 2828 with the default coupon specifications.
  • Shortcode with arguments
    [wt_smart_coupon_banner coupon_id=4545 banner_type=”widget” title=”End of Season Sale” description=”Avail 50%discount” position=”bottom_right” bg_color=”#8224e3″ ]
    The above shortcode will set the appearance type as a widget with title, description, positioned to bottom right and background color as #8224e3 for a coupon with ID 4545.

Note: The styling will be overridden only for arguments explicitly mentioned within the shortcode, others will follow default settings.

Conclusion

The coupon banners/sales countdown timers can be a productive option for gaining visitors’ attention from your site and thereby boosting overall sales.

Know more about the plugin Smart coupon for WooCommerce.

  • Was this article helpful ?
  • YesNo

Comment (1)

Leave a Reply

Your email address will not be published. Required fields are marked *