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 DowntownOrlando.com 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.
So without any further ado let’s get started with the steps for implementation
Pre-requisite:
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
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
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
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)
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
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.
