Using the announcement bar

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

This page covers the day-to-day jobs, a promo message, a CTA, dismissal, then the storefront behaviour and the developer filters for going beyond one bar.

1. Write the message

Open WooCommerce → Announcement Bar and write your text. You can use the safe-HTML allow-list, bold for the offer, a link for the details:

<strong>Free shipping over $50</strong>, see the <a href="/shipping">details</a>.

Allowed tags are , , , ,  ,  and <a> (with href, title, target, rel). Everything else is stripped on save. Keep it to one line where you can, the bar is a banner, not a paragraph.

2. Add a call to action (optional)

Set a button label and URL, and decide whether it opens in a new tab. The button only appears when both the label and URL are filled in. New-tab links get rel="noopener noreferrer" added automatically. The CTA is filled with your accent colour, so a button stands out more than the inline link for a primary action like Shop the sale.

3. Set the colours

Set background, text and accent in the live preview. The defaults already read well on any theme; change them to match your brand. The accent colour also drives links inside the message and the small “on air” signal pip.

4. Make it dismissible

Leave Dismissible on (the default) 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.

5. Enable the bar

Nothing renders until you tick Show the announcement bar on the storefront and save. Then open any front-end page and confirm the bar sits at the very top.

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. The dismissal is remembered under a key that includes a hash of the message, so a new message no longer matches the old key and the bar reappears, with no manual reset.

Storefront behaviour

The bar prints at wp_body_open and is position: sticky to the top of the viewport.
A dismissible bar is rendered with hidden and revealed by the script only after it checks whether the visitor already closed it, so there is no flash of a bar that should be hidden.
The close button moves focus to <body> so keyboard users are not stranded on a control that just disappeared, then the bar collapses its own height and is removed from the DOM.
If localStorage is unavailable (private mode, quota), the bar simply stays visible and the close button hides it for the current page view only.
Under prefers-reduced-motion, the breathing pip, the first-reveal light sweep and the collapse animation are all off, the bar shows and hides plainly.

Accessibility

The bar is a role="region" with an aria-label of Site announcement. The close button has an Dismiss announcement label, a visible focus-visible outline, and is fully keyboard operable. No state is signalled by colour alone.

No shortcode

Notice has no shortcode and no block. The bar is placed automatically at the top of the page via wp_body_open; there is nothing to embed in content.

Registering more than one bar (developers)

Notice renders whatever the notice/bars filter returns. By default that is a single bar with id default and your saved settings. Add another bar by appending to the list, each needs a unique id and a settings array using the same keys as notice_settings:

add_filter( 'notice/bars', function ( array $bars ): array {
    $bars[] = [
        'id'       => 'sale-2026',
        'settings' => [
            'enabled'      => true,
            'message'      => 'Spring sale, <strong>20% off</strong> everything.',
            'link_label'   => 'Shop now',
            'link_url'     => home_url( '/sale/' ),
            'link_new_tab' => false,
            'bg_color'     => '#0b3d2e',
            'text_color'   => '#ffffff',
            'link_color'   => '#ffd166',
            'dismissible'  => true,
            'dismiss_days' => 3,
        ],
    ];

    return $bars;
} );

Each bar is still subject to the active check (enabled + non-empty message), gets its own versioned dismissal key from its id and message, and renders in order. Stacked bars sit one above the other.

Narrowing visibility (developers)

notice/bar_active decides whether a given bar renders on the current request, after the base enabled/message check passes. Use it to limit a bar to certain pages, roles or segments:

add_filter( 'notice/bar_active', function ( bool $active, array $settings, string $bar_id ): bool {
    // Hide the sale bar for logged-in wholesale customers.
    if ( 'sale-2026' === $bar_id && current_user_can( 'wholesale' ) ) {
        return false;
    }

    return $active;
}, 10, 3 );

Adjusting saved settings (developers)

notice_sanitize_settings runs over the sanitised settings array just before they are stored, so you can enforce or normalise values on save:

add_filter( 'notice_sanitize_settings', function ( array $clean, array $raw ): array {
    // Force the brand background regardless of what was submitted.
    $clean['bg_color'] = '#0b3d2e';

    return $clean;
}, 10, 2 );