How to create and customize coupon banners in WooCommerce?

How to create and customize coupon banners in WooCommerce?

WooCommerce coupon banners are one of the most effective ways of promoting your store. Coupons are innately used to lift the acceptability of your store among your customers.

You may make use of such in-store promotions to generate potential sales. You may also employ other outdoor sales tactics to better your store.

Let us take a look into how you can use in-store promotional campaigns such as coupon banners to create more sales. We will be using the Smart Coupons for WooCommerce plugin to create such sales campaigns. Take a look!

Why do you need coupon banners?

Simply speaking, coupon banners are banners added to the WooCommerce store for promoting coupons. Banners are good locations for placing advertisements or promotions as it has high visibility and is hard to miss. Adding branded banners at high traffic-locations on your web page helps you create brand awareness and generate more sales.

Coupons are tools via which stores offer discounts and other offers to their customers. A coupon can offer a reduction in price, a flat-off discount, free products, and more. Customers are much more likely to purchase from you if you offer them the best deals in the market. Moreover, coupons are proven to improve the number of sales and sales figures.

You may need to employ yet another marketing technique to promote these so-called promotional discount coupons. One way is to schedule the coupon and let your customers make your customers aware of such coupons. This is where coupon banners are relevant.

Coupon banners announce the commencement of discounts and offer that the customer can avail of. This triggers a reaction that may take the customers back to your store when the coupons are active. Moreover, apart from awareness, such coupons and banners make the platform relevant and interesting. It is also vital in building a wall of trust between the store and its customers.

There are some independent coupon plugins to aid with creating and hosting banners for scheduled coupons. One of the best among such plugins is the Smart Coupons for WooCommerce plugin from WebToffee. Let us take a look at it before understanding its setup.

WooCommerce Coupon management plugin

Smart Coupons for WooCommerce pro

The Smart Coupons for WooCommece plugin is one of the best plugins for setting up scheduled coupon banners for your store. The plugin enables you to set up discount coupons, offer free products, create BOGO offers, and more.

This WooCommerece coupon management plugin is available in two versions – basic and premium. The basic version of this plugin offers features that are necessary for setting up coupons with minimal functionality in your store. With the premium version of this plugin, you can create coupons of any complexity with ease. The plugin also offers several other features such as BOGO, cart abandonment discounts, sign-up coupons, and more.

You may also set up scheduled coupons, and create and customize coupon banners with this coupon plugin. Let us take a look at it.

How to create WooCommerce coupon banners?

You will need the premium version of the plugin for this purpose.

To create coupon banners,

  1. Go to Plugins > Add New on your WordPress admin panel.
  2. Click on Upload Plugin and choose the plugin file that you have downloaded from your WebToffee console.
install smart coupons plugin in wordpress
  1. Install and activate the plugin.
  2. Now, go to Smart Coupons > General Settings.
  3. Under the Coupon banner > Settings, you will have the option to set up the banner.
  4. Click on the Yes button near the option Inject the banner automatically.
  5. Search and select the scheduled coupon that you have created under the option Associate a coupon.
  6. Select the pages where you want to display the coupon banner. Make sure to select the most visible locations in your store.
  7. Select the action that should be carried out when the coupon expires. It can either be hiding the banner or you can display a text. You should also provide the text if you choose the latter.
  8. Choose the behavior of the coupon – the ‘what should happen when you click on the coupon?’. Users should either be redirected to a specific URL or the coupon should apply when tapped on the banner.
  9. If you choose to redirect to another URL, provide the URL and specify whether it should be opened in a new tab or not.
  10. Click on Save to save your settings.
coupon banner settings in webtoffee

This will add the coupon banner to the specified pages on your store. The coupon banner will look like this now.

default coupon banner in woocommerce

But note that the banner might not be fit for your use case. For example, the default text ‘FINAL HOURS!’ and the description ‘20%’ might not be best suited for your situation. You can change such default configurations with coupon banner customizations.

How to customize these banners?

To customize the appearance of the coupon banners on your website,

  1. Go to Smart Coupons > General Settings > Coupon banner > Customize.
  2. You will find the banner customizer on the right side of the page. Set it up as you require.
  3. Click on Save at the end to save the changes made.
woocommerce coupon banner customizations

Customization options available in the customizer include,

Show as

You can choose how you want to display the coupon promotions. You can add it in a banner (the default setting) or you can use widgets to display these promotions. If you are choosing a widget, you will be asked to select the dimensions of the widget box.

This is how a widget that we have configured would look.

coupon promotion through widgets

You can also change the position of the banner or widget as required. For example, you can move the banner to the bottom of the page.

These settings also enable you to select the background and the border color of the banner or widget.

the show as coupon banner customizer


You can enable or disable adding the title with the toggle bar. You may also change the title text, size, and color.

title customizer


Enable or disable the description, and change the description text, size, and color using this setting.

description customizer


You can add the timer if you like or else you can disable it. You can also change the text size, color, background color, and border color of the timer element.

count-down timer customizer

Coupon code

You can select the text size, color, background color, and border color of the coupon code icon in the widget or banner. You can also disable showing the coupon code in the banner if you like.

coupon code text customizer

Close button

If you do not want the close button on the banner or the widget you can disable it. You may also change the color of the close icon.

close button customizer

This is how the coupon will appear on your website.

coupon promotion in widget

How to use coupon shortcodes to set up banners?

In addition to the customizer, you may also use custom shortcodes to set up and customize the banners and widgets.

If you just want to add a default banner to your page, you should place the shortcode given below on the respective page.

[wt_smart_coupon_banner coupon_id=xxx]

These are the shortcode arguments that you can use in the coupon banner shortcodes.

short code arguments for customizing woocommerce count-down coupon banners

Here is an example of shortcodes 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 widget will look like this.

widget with coupon details


Banners and widgets inside your store enable you to fully tap the promotional potential of your store. This eye-catching setup lets you indigenously promote imminent sales campaigns. All you need to create such a cost-effective campaign is a single WooCommerce coupon plugin. The plugin Smart Coupons for WooCommerce enables you to set up scheduled coupons and create coupon banners.

Do let us know what you think about this article and the plugin in the comments.