Store announcement bar in WooCommerce: sales, shipping cut-offs and notices

A store announcement bar is one of the simplest ways to tell every visitor something important the moment they land. Whether you are running a weekend sale, reminding shoppers of a Christmas shipping cut-off, or flagging a free-shipping threshold, a single bar at the top of the page reaches everyone without an email or a popup. This guide explains what an announcement bar is, when to use one, and how to set it up cleanly in WooCommerce.

What a Store Announcement Bar Is

A store announcement bar is a thin, full-width strip pinned to the top of every page that carries one short, store-wide message.

It sits above your header so it is the first thing a visitor reads, and it usually pairs a single line of text with an optional call-to-action button. The point is reach: every page on your store shows the same message, so you do not depend on shoppers opening an email or noticing a banner buried on the home page.

Unlike a popup, a good announcement bar does not block the page or interrupt browsing. It stays out of the way, communicates one thing, and lets the visitor read it and move on.

When to Use an Announcement Bar

An announcement bar works best for a single, time-sensitive, store-wide message. The clearest uses are:

• Sales and promotions. Announce a discount, a coupon code, or a flash sale, with a link to the sale page.
• Free-shipping thresholds. Tell shoppers how much they need to spend to unlock free delivery.
• Shipping cut-off dates. Warn customers of the last order date for delivery before a holiday or weekend.
• Service notices. Flag stock delays, a temporary closure, or extended dispatch times during busy periods.
• Important policy changes. Point to updated terms, a new returns window, or seasonal opening hours.

The rule of thumb is one idea per bar. If you try to communicate three things at once, shoppers absorb none of them.

How to Write a Bar That Gets Read

A bar that gets read is short, specific and ends with a single action.

1. Lead with the benefit or deadline. “Free shipping over PLN 200” or “Order by Friday for delivery before the holidays” beats a vague “Special offer”.
2. Keep it to one line. The bar is narrow, especially on mobile, so trim every word that is not pulling its weight.
3. Add one call to action. A single button or link to the sale, the category, or the policy page is enough. Two competing links split attention.
4. Use plain numbers and dates. Concrete figures (“save 20%”, “by 19 December”) are more persuasive and more honest than slogans.
5. Refresh it when the offer changes. A stale “summer sale” bar in autumn erodes trust faster than no bar at all.

How to Set Up an Announcement Bar in WooCommerce

Setting up an announcement bar in WooCommerce comes down to where the bar is injected and how it behaves. A clean setup follows a few principles:

• Render it site-wide. The bar should appear on every front-end page through the theme’s wp_body_open hook, so it shows above the header without editing template files. Most modern themes support this hook.
• Make it dismissible. Let shoppers close the bar once they have seen it. Storing that choice in the browser keeps the page tidy on repeat visits.
• Match your brand. Set the background, text and accent colours so the bar looks part of the store rather than a bolt-on.
• Load assets only when active. A well-built bar enqueues its CSS (and any dismissal script) only when the bar is actually switched on, so a disabled bar costs nothing.
• Keep it accessible. The bar should be a labelled region with a keyboard-operable close button, visible focus styles, and respect for reduced-motion preferences.

You can hand-code this with a snippet, but a dedicated plugin gives you a settings screen, a live preview and dismissal handling without touching theme files.

Accessibility and Performance Matter

An announcement bar touches every page, so its quality affects your whole store.

On performance, the lightest bars render as plain server-side HTML and avoid front-end JavaScript frameworks entirely. Loading the small stylesheet only when the bar is enabled means a disabled bar adds nothing to your pages, and there is no layout shift beyond the bar’s own height.

On accessibility, the bar should be exposed as a labelled ARIA region so screen readers announce it, the close button should be operable by keyboard, focus styles should be visible, and any animation should respect a visitor’s reduced-motion setting. A bar that fails these basics annoys some shoppers and excludes others.

How Notice Helps

For a focused, lightweight way to do all of this, Notice - Announcement Bar for WooCommerce adds one store-wide bar to the top of your shop with exactly the controls described above.

You write the message (with a small safe-HTML allow-list for bold, italic, links and line breaks), add an optional call-to-action button with its own URL and new-tab option, and set your background, text and accent colours with a live preview. The bar is dismissible, with the choice remembered in the visitor’s browser via localStorage (no cookies, no personal data), and editing the message text re-shows it to everyone automatically.

It is built to stay out of the way: the bar renders server-side at wp_body_open, the CSS loads only when the bar is enabled and has a message, the dismissal script loads only when the bar is dismissible, and it is HPOS and cart and checkout blocks compatible. The result is one clear message, shown to every shopper, with no weight added when the bar is off.