How to Add an Announcement Bar to Your Woocommerce Store to Boost Conversions

Do you want to add an announcement bar to your Woocommerce store and looking for an easy solution? In this article we will tell you how you can add an announcement or notification bar to your Woocomerce store and all of that without hiring a developer or doing any kind of coding. Sounds exciting? Right? Let’s dive into the details. 

You might own a killer Woocommerce store but what if your customers aren’t aware of those exciting products that you own, basically you want your customers to know that something exciting has been recently launched on your website. Woocommerce notification bars basically serve this prime purpose of catching your user’s attention in the first glance. This way your customers will never miss out on exciting offers if any that you have on your Woocommerce store.

These Woocommerce notification bars are a great way to boost conversions on your store. Let’s understand some basics about the notification bars and when one should use them. By making use of the Notification bars on your Woocommerce store you can basically let your customers know about

– You can let your customers know about the insane Black Friday & Cyber Monday deals that you are offering on your website

– The latest discounts that you are offering for your SaaS product (30% Off until 23rd Feb etc)

– You can also have your lead magnets where you wish to show the notification bar

– If you are doing any kind of product launch you can inform your customers about the same

These notification bars can be shown at the top or bottom of your website in the form of a banner.

Which WordPress Plugin is the best to add Notification bars to a WordPress website?

As such there are several WordPress notification bar plugins that exists but none of them come close to Optinmonster which is one of the most popular lead generation software which you can make use of to convert and monetize your website traffic

The notification bar by Optinmonster can help you get better results in less time. Besides this Optinmonster gives you various targeting options so you can show the notification bar to your customers depending on whether the visitor has visited the website for the first time, or if the visitor has spent close to 5 seconds. Optinmonster can help you save several hours which you would have utilized trying out coding options. In short, Optinmonster makes your life super easy by offering you various custom options.

One of the websites added over 4,000 subscribers to their Email list by making use of Optinmonster . Even you can make use of Optinmonster to get such amazing results for your business.

Below we have given an example how WPForms has made use of a notification bar on their website.

WPForms making use of an Announcement Bar

So without any further ado let’s get started with the steps for implementation


In order to create a notification bar you will need to have purchased the PRO plan or above of Optinmonster

Step 1: Create an account on Optinmonster & Sign in to Optinmonster

In order to get started with this step you need to have the Pro plan or higher (If you haven’t got one of their plans then we suggest that you click on the below button and get their Pro plan or higher because without that we cannot proceed further if you don’t have a paid Plan.

Assuming that you have bought the Optinmonster Pro plan we will go ahead and implement the next steps

Step 2: Login to your Optinmonster account

Optinmonster Login screen

Step 3: Create a campaign type in Optinmonster

Once you login to your account then you will create a campaign by selecting one of the campaign types present inside Optinmonster

Select a campaign type

For the sake of this tutorial we will select Floating Bar to create a notification / announcement bar

Step 4: Choose a Template as per your Needs

Once you choose the Floating bar campaign type in the next step we will choose the template that best suits your requirement.

Optinmonster has over 50 in-built templates which you can make use of. These templates will make your life a lot easier as you don’t need to create them from scratch, this saves a lot of time and efforts. Most of these templates come inbuilt with several elements like optin fields , countdown timers etc.

In order to create the Woocommerce notification bar you can choose the one which suits your requirement. Choose a template that suits the end goal you are planning to achieve with the Woocommerce notification bar.

For the sake of this tutorial we are going to make use of the “Alert” template because you can customize it. Once you mouseover on the “Alert” template you will see an option “Use Template” similar to the one shown below on the right hand side.

Once you click on Use template we will start customizing the template and connect it with your Woocommerce store and build the notification bar

Connect your Woocommerce Store

Step 5: Customize the notification bar

If you want to customize the notification bar you can do so by selecting the specific part of the campaign. Below we have shown an example of how the text element is been customized

You can even change the colors to match your brand colors.

There are several customizations you can to your notification bar and you can do them in a matter of minutes

You can even setup redirect URL – This will be the URL to which the user will be redirected to, for e.g if you want them to go the deals page you can use the deals page as the redirect URL

Changing the Placement of the Notification bar

Now one of the most important thing that you need to decide is the placement of the notification bar. By default, the placement of the notification bar is at the bottom of your page. You can change the placement of the notification bar and bring it up.

In order to change the placement of the notification bar go to the home menu of your editor and click on Floating settings

Once you click on floating settings then you will have to enable the Toggle switch next to the text which says “Load floating bar at the top of the page” (shown in the below screenshot)

Once you enable the toggle switch then your notification bar will appear at the top of the page.

Now we are done with the first important step we will now go to the next step and decide when to trigger the notification bar (e.g when the user has spent more than 5 seconds). Besides this you can also decide the placement of the notification bar – whether you want to place the notification bar on a specific page or on the homepage.

In order to decide the above kind of placement and trigger we will make use of Display rules mechanism provided by Optinmonster

You can find the “Display Rules” settings inside of your editor (refer to the below given screenshot)

Display Rules in Optinmonster

Now we will quickly discuss and see the implementation for the following types of scenarios

– You want to show your notification bar across all the pages of the store (i.e sitewide)

– You want the Notification bar to appear on specific pages only

– You want thenotification bar to appear after the user has spent a specific amount of time (e.g 5 seconds)

– You want the notification bar to appear immediately once the page loads

So let’s discuss one of the scenarios stated above and the implementation for the same

How to Show Notification Bar Sitewide for a Woocommerce Store

When you are inside the display settings you will see the two options are configured by default

– Time on page is atleast 5 seconds

– Current URL is any page

Default display settings in Optinmonster

Now if you want to change the time period from 5 seconds to something else you can do so. The second setting which says “current URL path” is any page means that the notification bar will appear on any page of your store (sitewide)

How to Show Notification Bar in Woocommerce Store when page loads

If you want to show the notification bar on your Woocommerce store immediately when the page loads you can do so by configuring the settings accordingly.

All that you have to do is change the setting from “is at least” to “is immediate” (in the above step we had made use of “at least” and set the timer to 5 seconds) .

How to Display Notification Bar on the Specific pages of a Woocommerce Store

There could be several reasons why you may want to display a notification bar on specific pages of your store. Below we have given one such example

– A sale is going on for a specific product page (so in this case you can display the notification bar on this specific product page)

In order to show the notification bar on a specific page you will have to specify the settings and change the current URL path to “exactly matches”

Once you choose the option “exactly matches” then you will have to enter that specific URL in the box next to it

If you want your Notification bar to appear on a specific subcategory pages e.g /products you can do so by using the “contains” operator.

Once you select “contains” then you can enter the subfolder path e.g /products/ – This way all the products that come in this subfolder will have the notification bar displayed.

We are done with all the use cases and scenarios of how to display a Notification bar on a Woocommerce store.

Step 6: Save and Publish the campaign & template

Once you are done with all the above steps it’s time to save and hit the Publish button

You can also announce in case you have 50% OFF, $15 off or FREE shipping or time sensitive deals in your notification bar and grow your sales to the next level.

We hope you enjoyed this detailed tutorial on how to create a notification bar for a Woocommerce store without doing any kind of coding.

Leave a Comment

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