How to Create and Customize Coupon Banners in WooCommerce?

This article will look into how to utilize WooCommerce promotional banners to bring in more sales. We will be using the Smart Coupons for WooCommerce plugin to create and customize WooCommerce coupon banners.

Do your customers immediately notice your best deals when they visit your store? If not, you may be missing out on the potential of WooCommerce coupon banners.

WooCommerce coupon banners are a highly effective way to promote your store. These banners highlight your best offers and more importantly, enhance the brand’s appeal to customers. Let’s get started.

Simply speaking, coupon banners are banners added to the WooCommerce store for promoting coupon deals and discounts. Placing these advertisements or promotional banners strategically can get you high visibility as it is hard to miss.

Coupons, on the other hand, are tools for offering discounts and exclusive deals to customers. A coupon can offer a reduction in price, a flat-off discount, free gifts with purchases, and more. Customers are much more likely to purchase from you if you offer them the best deals in the market. Moreover, coupons and sales banners are proven method to improve sales and revenue. 

Placing branded coupon banners in high-visibility areas, where customers are most likely to notice them, is key to grabbing attention. These banners should immediately inform shoppers of ongoing sales, ensuring they don’t miss out. This is the ultimate goal of WooCommerce sales or coupon banners: to promote the brand and drive more sales.

Simply offering exceptional coupons and deals won’t make a significant impact unless they are effectively promoted. One effective approach is scheduling coupons and using banners to inform customers about them. This is where coupon banners truly shine.

Beyond raising awareness, WooCommerce coupon banners add excitement to your platform, keeping it engaging and relevant. It is also vital in building a wall of trust between the store and its customers. 

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, customize sales banners, offer free products, create BOGO offers, and more. 

This Woo Discount Rules 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 a dedicated BOGO module, cart abandonment discounts, sign-up coupons, and more. 

You can also schedule coupons to create limited-time offers and display countdown timers on coupon banners for increased engagement.

In order to access the coupon banner features in WooCommerce, you must upgrade to the premium version of the WooCommerce Smart Coupons plugin. After installing and activating the plugin, you can create coupon banners by following these steps, 

• In your WordPress dashboard, go to Smart Coupons > General Settings. 
• Under the Coupon banner > Settings tab, you will have the option to set up the discount banners. 
• Click on the Yes button near the option Inject the banner automatically.
• Search and select the scheduled coupon that you have created under the option Associate a coupon.
• Next, select the pages where you want to display the coupon banner. Make sure to select the most visible locations in your store. 
• 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.
• 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.
• If you choose to redirect to another URL, provide the URL and specify whether it should be opened in a new tab or not.
• Click on Save to save your settings.

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

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.

To customize the appearance of the coupon banners on your WooCommerce store, 

• Go to Smart Coupons > General Settings > Coupon banner > Customize.
• You will find the banner customizer on the right side of the page. Set it up as you require.
• Click on Save at the end to update the changes made. 

WooCommerce coupon banner customization features include, 

#1 Show As Coupon Banners or Coupon Widgets

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

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

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

#2 Title of the Promotional Banner

If you want to customize the title of the WooCommerce promotional banner or widgets, then you can make use of these settings. First, enable or disable adding the title with the toggle bar. You may also change the title text, size, and color. 

#3 Coupon Banner Description 

You need to promote your best deals here. And for that you need to convey your coupon deals through concise descriptions. Using the enable or disable settings in the Description menu, you can change the description text, size, and color. 

#4 Adding Countdown Timers to Banners For Urgency

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.

#5 Coupon Code Button

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.

#6 Adding the Coupon Banner Close Button 

You can allow customers to close the WooCommerce sales banner or keep it static on the website. If you prefer not to have a close button on the banner or widget, you can disable it. Additionally, the color of the close icon can be customized.

This is how the coupon widget will appear on your website.

In addition to the coupon banner customizer, you may also use custom shortcodes to set up and customize the coupon 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.

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.

Coupon banners and widgets in your store allow you to fully utilize the promotional potential of your site. This eye-catching setup lets you to effectively promote ongoing or upcoming sales campaigns and flash sales. With the Smart Coupons for WooCommerce plugin, you can easily set up scheduled coupons and create customized coupon banners to drive more engagement.

Have any questions about adding WooCommerce sales banners? Feel free to ask in the comments below.

Thank you for reading!