Configuration
Notice is configured on one screen: WooCommerce → Announcement Bar. A live preview shows the bar as you edit. Remember to enable the bar once you are happy — nothing loads on the front end until it is active.
Message
Section titled “Message”Your announcement text. A small safe-HTML allow-list is supported:
- bold and italic
- links
- line breaks
Anything outside the allow-list is stripped, so the message stays safe to render at the top of every page.
CTA button
Section titled “CTA button”An optional call-to-action button with:
- its own URL, and
- a new-tab option (open in a new tab or the same tab).
Leave it off for a message-only bar.
Colours
Section titled “Colours”Set the background, text and accent colours, with a live preview. The colours are CSS custom properties, so the bar matches your brand and adapts cleanly in dark mode.
Placement
Section titled “Placement”- Sticky — the bar stays pinned to the top as the shopper scrolls.
- Static — the bar sits at the top and scrolls away with the page.
Schedule
Section titled “Schedule”Optionally show the bar only within a time window:
- a start date/time, an end date/time, or both,
- interpreted in your site’s timezone,
- leave either blank for an open-ended window (start-only = “from now on”; end-only = “until then”).
Outside the window the bar does not render and loads nothing on the front end.
Dismissible
Section titled “Dismissible”Let shoppers close the bar:
- the choice is stored in the visitor’s browser via localStorage — no cookies, no personal data,
- set how many days the dismissal lasts; 0 = forever.
Auto re-show: editing the message text re-shows the bar to everyone automatically, so a fresh announcement is never hidden by an old dismissal.
How the bar renders
Section titled “How the bar renders”The bar appears at the very top of every front-end page via the theme’s wp_body_open hook, which most modern themes support. The CSS and the small dismissal script are enqueued only when the bar is active, so disabled or out-of-schedule states add zero front-end weight, and the markup is plain HTML with no JavaScript framework.
Accessibility (built in)
Section titled “Accessibility (built in)”The bar is an ARIA region with a keyboard-operable close button, focus-visible styles and prefers-reduced-motion support. There is no layout shift beyond the bar’s own height.