Coupon Banner With Countdown Timer in WooCommerce

Smart Coupons for WooCommerce is an extended coupon plugin that allows you to set up a stunning sales countdown timer in banner/widget display formats. Follow the steps below to set up stunning coupon banners.

The plugin allows you to embed coupon banners/ countdown timers in your store in two ways.

1. By inserting the shortcode manually into any of your pages.
2. Automatically by ‘Injecting coupons’.

However, both ways will ensure a coupon banner announces the offer to your visitors.

You can begin by creating a simple coupon 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.

• First of all, install and activate the plugin.
• Go to Smart coupon > General Settings.
• Head on to the Coupon banner tab.

• The coupon banner tab consists of two sections: Settings and Customize as shown below:

Injecting the banner automatically

• Choose yes to inject the coupon automatically. You must associate a coupon and specify the pages to display the coupon banner.

Associating a coupon

• It is necessary to associate a coupon and specify the pages where the coupon banner will appear. The banner will appear as set in the customize section.
  • Type: Select a banner or widget by choosing the appropriate option from the Type drop-down.
  • Position
    • When choosing the banner type, you can position it at the top or bottom of the page.
    • When choosing the widget type, you will have additional options to place the widget on the top left, top right, bottom left, or bottom right or even provide a custom height and width for the widget.
  • Background/Border Color: Choose an appropriate color for the banner from the color palette.
  • Dismissable: Select the checkbox with a dismissable close button for the banner. After enabling, you will have the option to choose the dismissable button color.
  • Action on coupon expiry:
  • Action on clicking banner
    • Apply coupon: When clicking the banner, the coupon will auto-apply.
    • Redirect to URL: If you choose to redirect to a custom URL on click, an additional field to specify the redirection link will be appended. You can even choose to open the link in a new tab.

• Next, let’s see how the coupon created above can be displayed as a banner or widget on your site’s front end. To do that, switch to the Customize section.

• The coupon banner window displays a coupon banner template, and each item in the coupon banner can be customized from the configuration panel placed on the right side of the window. The changes made in the customization panel are simultaneously reflected in the sample coupon banner template. The various customization options for the coupon banner/widget are shown below.

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

Show as Banner or Widget

Title

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

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.

Coupon timer

• The coupon banner will display a real-time coupon countdown timer based on the coupon expiry date. This panel allows you to adjust the font size, text color, border color, and background color of the banner.

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

Display coupon

This panel allows you to adjust the font size, text color, border color, and background color of the coupon code displayed on the banner.

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

You can see the coupon banner with a real-time countdown timer. On clicking the banner, you can opt for the coupon to be applied directly to 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. To do this, embed the shortcode manually into any of your pages, announcing the offer to your visitors.
• To achieve this, 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. Below are some of the predefined arguments that can be used along with shortcodes.

Example:

• Shortcode for default banner layout
  [wt_smart_coupon_banner coupon_id=2828]
  Displays the banner for 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 a title and description positioned to the bottom right and a background color of #8224e3 for a coupon with ID 4545.