How to Add a Single or Multiple Top Bars in WordPress or WooCommerce

If you want a personalized message to appear at the top of your website, Top Bar for WordPress and WooCommerce plugin can help you achieve that in a matter of minutes. Adding a bar to the top using a plugin on your website gives your users greater functionality and freedom. One of the benefits of using a top bar plugin is that it allows you and your users to simply add navigation and notifications to the top of your site. 

Configure Top Bars in WooCommerce by Addify

Top Bar for WooCommerce is a useful plugin that lets you add a notification bar at the top or bottom of the pages. Using this plugin, you can highlight product promotions, sales, and other offers. A countdown timer will create a sense of urgency in your customers making them purchase products from your shop. The plugin supports various customization options for the countdown timer.


  • To begin installation, look for the .zip file from your WooCommerce account and begin the download.
  • At the WordPress Admin Panel, go to Plugins, choose Add New and then Upload the file of the Plugin.
  • Click on Install Now and then Activate the plugin.

Setup and Configuration

The “Top Bar” appears in the WordPress Admin menu after you activate the WooCommerce Top Bar plugin. Click to create a new notification bar.

Step 1: Configure General Settings

From the WooCommerce Top Bar plugin settings, you can specify the basic options for your new top bar. These include:

  • Position
  • Height
  • Width
  • Priority
  • Style
top bar plugin for wordpress

Step 2: Specify Content

From the plugin settings, you can set the content that will appear in the notification bar, as well as the button. Additional content settings include:

  • Add CTA button
  • Enable timer on notification bar
  • Specify start and end date
top bar plugin for woocommerce

Step 3: Adjust Style

  • Customize text by changing
    • Font color
    • Font size
    • Font family
  • Add a custom background image or any color
  • Customize button by changing
    • Background color
    • Text color
    • Font size
    • Font family
  • Add a custom CSS to enhance design (suited to pro users)

You can style the content of your notification bar using the following options.

top bar plugin for wordpress

Step 4: Set Conditions

The Top Bar plugin for WooCommerce provides the feature to set conditions to specify the Top Bar position.

You can choose to display notification bar to:

  • Entire website
  • Selected pages
  • Selected products and categories
  • Selected posts 
top bar plugin for woocommerce

Configure Settings of the Top Bar Plugin

To get to the configuration page, go to settings in the top bar menu. You can change the settings for the Countdown Timer here.

Set the Countdown Timer 

From the plugin settings, you can select the counter type from the dropdown menu. As you choose its type, set the timer to required time. The plugin also offers customization of a countdown timer. The customization options include:

  • Upper background color
  • Lower background color
  • Font color
  • Label font color
  • Label font size 
top bar plugin for WordPress

To Conclude

We hope the information in this post helps you successfully install and configure the WooCommerce Top Bar plugin in your online store. If you have any queries or issues, please do not hesitate to contact our support team which will resolve your issue in no time.

Avail The Opportunity

Subscribe to Our Updates and Newsletters.