How to add 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. Some coupon banner samples with the sales countdown timer are given below.

WooCommerce sample coupon banner-Sales countdown timer
Sample coupon banners

You can also display the sales countdown timer in widget format as shown below:

WooCommerce sample Coupon Banner as widgets-Sales countdown timer
Sample widgets

The plugin allows you to embed shortcode manually into any of your pages or automatically by using the configuration option “Inject coupons”. Either way will ensure a coupon banner announcing the offer to your visitors.

Let’s begin by creating a simple coupon offering a 20% discount with an expiry date. In addition, you can imply other usage restrictions, limits, etc on the coupon to behave in specific manners.

Smart coupon for WooCommerce-Countdown timer coupon
Smart coupon for WooCommerce-Countdown timer coupon

Next, let us see how the above-created coupon can be displayed as a banner/widget on the front end of the 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 customized from the customization panel placed on the right side of the window. The changes done in the customization panel are simultaneously reflected in the sample coupon banner template. The various customization options for the coupon banner/widget as shown below.

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

Each option of the customization panel can be toggled to control its visibility. You can click on the expand button against each option to load its customization 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.

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 customized 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.

Likewise, coupon banner can be a productive option for gaining visitors’ attention from your site and thereby boosting overall sales.

Know more about Smart coupon for WooCommerce

 

 

 

  • Was this article helpful ?
  • YesNo

Leave a Reply

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