Using the announcement bar
This walkthrough covers the common announcement-bar jobs: a promo, a shipping cut-off and a scheduled sale.
1. Write the message
Section titled “1. Write the message”Open WooCommerce → Announcement Bar and write your text. You can use a little formatting from the safe-HTML allow-list — bold for the offer, a link for details:
**Free shipping over $50** — see the <a href="/shipping">details</a>.Keep it to one line where you can; the bar is a banner, not a paragraph.
2. Add a call to action (optional)
Section titled “2. Add a call to action (optional)”Turn on the CTA button, set its URL and decide whether it opens in a new tab. A button draws more clicks than an inline link for a primary action like Shop the sale or Claim the code.
3. Set the colours and placement
Section titled “3. Set the colours and placement”Set background, text and accent colours in the live preview so the bar matches your brand. Choose sticky to keep the message pinned while shoppers scroll (good for a code or cut-off they need to remember), or static to let it scroll away.
4. Schedule a promotion (optional)
Section titled “4. Schedule a promotion (optional)”For a time-boxed sale, enable the schedule and set a start and/or end in your site’s timezone:
- start + end — a fixed promo window,
- start only — “from this moment on”,
- end only — “until this moment”.
Outside the window the bar simply does not render, so you can set a Black Friday banner weeks ahead and forget it.
5. Make it dismissible (optional)
Section titled “5. Make it dismissible (optional)”Turn on Dismissible so shoppers can close the bar, and set how many days the dismissal lasts (0 = forever). The choice is stored in the visitor’s browser with localStorage — no cookies, no personal data.
6. Enable the bar
Section titled “6. Enable the bar”Nothing shows until you enable it. Then open any front-end page and confirm the bar appears at the very top.
Auto re-show on a new message
Section titled “Auto re-show on a new message”When you change the message text, Notice re-shows the bar to everyone — even shoppers who dismissed the previous one. So your next announcement is never hidden behind an old dismissal, with no manual reset.
Why it stays fast
Section titled “Why it stays fast”The CSS and dismissal script load only when the bar is active; a disabled or out-of-schedule bar adds nothing to the page. The markup is plain HTML — no front-end framework — and there is no layout shift beyond the bar’s own height. The bar is an ARIA region with a keyboard-operable close button and respects prefers-reduced-motion.