Get Your Store Ready for Easter Sales -Flat 23% OFF on Entire Catalog Use Coupon -easter23

    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 Oppurtunity

    Subscribe to Our Updates and Newsletters.