Notification Center — Complete Guide
Install, configure and run the WooCommerce notification bell: placement, automatic products, promo codes, posts, announcements, multilingual and REST API.
Overview
DataFirefly Notification Center adds a notification bell to your WooCommerce store header, next to the cart and account area. A red badge flags unread updates and naturally drives clicks, with no email and no intrusive pop-up.
The plugin automatically broadcasts your new products, promo codes and blog posts, and lets you publish free-form announcements from the dashboard. It is multilingual (Polylang / WPML), page-cache friendly and compatible with High-Performance Order Storage (HPOS).
In short: a bell and dropdown panel, an unread badge, and three ready-to-use automatic triggers (products, promo codes, posts).
Installation
- Upload the
df-notification-centerfolder towp-content/plugins/, or install the ZIP from Plugins then Add New. - Activate the DataFirefly Notification Center plugin.
- Open the Notifications then Settings menu to choose how the bell is displayed.
WooCommerce is recommended for product and promo-code notifications. Manual announcements and blog posts work even without WooCommerce.
Displaying the bell
The plugin offers four placement methods, selectable in Settings, Insertion method.
The 4 methods
- Navigation menu — the bell is appended to a menu (choose the theme location, usually “primary”).
- CSS selector — the bell is inserted just before or after an element you specify. Ideal for pinning it to the cart icon.
- Floating bell — a fixed button at the bottom right or left of the screen.
- Shortcode — place
[df_notification_center]wherever you like.
Pinning the bell to the cart icon
Choose the CSS selector method and enter your cart icon selector, for example a.cart-contents. The bell is inserted automatically next to it. The exact selector depends on your theme: inspect the cart icon to find it.
Appearance
You can set the accent color, the badge and bell colors, choose between a simple red dot or a numeric counter, enable the bell animation when there are unread items, and show or hide the bell on mobile.
Announcing your content
New products (automatic)
When the option is enabled, every published product automatically creates a notification, with no action required. Turn this behavior on or off in Settings, Products.
Promo codes
In the WooCommerce coupon editor, a Notification Center checkbox appears. Tick it to broadcast the code, with an optional custom message. The code is shown in the panel with a Copy button. If the coupon has an expiry date, the notification disappears automatically on that date.
Blog posts
In the post editor, a Notification Center meta box offers a checkbox. Tick it to announce the post; you can add a custom message.
Manual announcements
From the Notifications screen, create free-form announcements (title, message, link, expiry date). The table also handles activating, deactivating and deleting every notification.
Scheduling and click tracking
Each notification can be given an end date: past that date, it disappears from the panel. The dashboard also shows the number of clicks per notification, so you can measure what interests your visitors. An optional automatic cleanup removes inactive notifications beyond a set number of days.
Read and unread
For logged-in customers, the read/unread state is stored server-side and synced across their devices. For logged-out visitors, it is stored in the browser. The bell therefore stays page-cache friendly: the dynamic content is loaded over AJAX and does not prevent caching.
Opening the panel marks the notifications as read and clears the badge.
Multilingual (Polylang and WPML)
When the language filter is enabled, each notification is shown only in its own language: a product published in French appears only on the French version of the site, and so on. The plugin detects the language via Polylang or WPML. You can disable this filter to broadcast every notification in all languages.
REST API (headless)
A read-only endpoint exposes the visible notifications, useful for a headless front end:
GET /wp-json/df-nc/v1/notificationsThe response contains the active notifications (filtered by language) along with the IDs already read by the current user.
FAQ and troubleshooting
The bell does not show
Check the selected insertion method. In Menu mode, make sure a menu is assigned to the selected location. In CSS selector mode, check that the selector matches an element present on the page.
The badge does not appear
The badge only appears when there is at least one active unread notification. Create a test announcement from the Notifications screen to verify.
Is it compatible with my cache?
Yes. The bell is rendered as static HTML and notifications are loaded over AJAX, which stays compatible with WP Rocket, LiteSpeed Cache and other caching systems.
Is it HPOS compatible?
Yes, the plugin declares compatibility with WooCommerce High-Performance Order Storage.