Setting Up Top Bar for WooCommerce

Top Bar for WooCommerce
Add to Cart View Product
Top Bar for WooCommerce
Add to Cart View Product

Manage the Existing Bar

Once the bar is created, it will be displayed on the All topbar view, where you can view the following details:

  • Title: Display the title of the bar.
  • Bar position: Display the placement of the bar, such as (e.g., top of the page, footer, or below the footer).
  • Bar Style: Shows the style of the bar, such as sticky or fixed.
  • Bar Start Date: Display the configured start date of the bar.
  • Bar End Date: Display the end date of the bar.
  • Date Added: Shows the date and time when the topbar was created or published.
  • Action: Available on the top bar, where you can
    • Edit: You can edit/update the topbar.
    • Delete: You can delete the topbar if needed.

Creating a New Top Bar

Navigate to WordPress Dashboard > Top Bar > and click the “Add New Top Bar” option at the top. After clicking it, simply provide all the information mentioned, such as:

General Settings

  • Add Title: Add the name/title of Topbar.
  • Bar position: Set the bar position, such as appearing on the top of the page, above the footer, or below the footer. 
  • Bar style: Select the option in a dropdown and make your bar sticky and fixed according to your preference.
  • Select bar animation: Choose the animation type, such as:
    • Static Information Bar
    • Scrolling Text Bar
    • Manual Sliding Bar
    • Automatic Sliding Bar
  • Applied on: Select the display position of the bar 
    • Whole Website: Displayed on all pages
    • Selected Items: Restrict to specific products, categories, pages, or blog posts
  • Select Countries: Target the bar by specific countries using the dropdown list, and only the visitors of the selected country will be able to view this bar.
  • Bar Priority: Set a value between 1-100 to prioritize bars in the same position.
  • Bar Shortcode: Use this shortcode to display the bar anywhere on the website.

Bar Content

Configure the following settings to style the bar content.

  • Enable Call to Action: You can enable/disable the call to action based on your preference. If enabled:
    • Call-to-Action button text: Add the text for the call-to-action button, e.g., Shop Now or Learn More.
    • Call-to-Action button link: Add the redirect link for the call-to-action button. 
  • Enable Timer: Check box to enable/disable the timer. If enabled:
    • Timer type: Choose the timer type, such as
      • Date Range: Timer run with the specific date and time. 
      • Auto Resetting Time: The timer will reset automatically after the given time duration.
      • Start/End Date: Set the specific date when the bar will appear.
      • Start/End Time: Set the specific time for the bar to appear. 
  • Bar Text: Add the custom text that is displayed inside the bar where you can add media, shortcode or another bar text.

Bar Style

  • Bar Background Color: Set the background color of the bar to match your brand.
  • Bar font color: Set the font color inside the bar.
  • Button background color: Set the background color of the button, which is displayed in the topbar. 
  • Button font color: Choose the font color for the topbar button. 
  • Bar background image: Add and remove the custom image for the bar background.
  • Bar font family: Set the font family used inside the bar.
  • Button font family: Set the button font family for the bar.
  • Bar font size: Set the font family used inside the bar.
  • Button font size: Set the font size of the button. 
  • Bar border radius: You can set the border radius of the button. 
  • Button border radius: You can set the button border radius.
  • Bar Content Width: You can set the content height and width inside the bar.
  • Custom CSS: It allows you to add the custom CSS for advanced styling. 
  • Publish: After adding the required details, click on the publish button to create the bar.

Countdown timer setting

When you enable the timer in the notification bar/topbar, you can configure the following settings: 

  • Select Counter: You can choose the timer style from the given dropdown (e.g., Counter-1, Counter-2, etc.)
  • Countdown timer: Display the countdown timer layout based on the selected style.
  • Background Color: You can set the background color of the countdown timer container.
  • Digit Color: Choose the color for the numeric digits (e.g., hours, minutes, seconds).
  • Label Color: Set the color of labels (e.g., Days, Hours, Mins).
  • Digit Font Size: You can set the font size (in px) for the timer digits.
  • Label Font Size: You can set the font size (in px) for the label text below each digit.