A sticky notification bar can be an excellent way to display important messages, promotions, or updates at the top of your WooCommerce store. While there are several plugins available for this feature, you can add a custom sticky notification bar directly to your WooCommerce store without relying on third-party tools. This approach gives you full control over the design and functionality, including adding buttons and messages.
In this guide, we’ll show you how to create a sticky notification bar with an optional button. We’ll also cover how to implement a close button that, when clicked, will hide the bar and ensure it doesn’t reappear on other pages of the site. As always, ensure you’re making these changes in a child theme to avoid losing custom code during theme updates.
Why Add a Sticky Notification Bar Without a Plugin?
There are many reasons to use a sticky notification bar, such as:
- Promotions: Advertise discounts, special offers, or limited-time sales.
- Updates: Notify customers about shipping delays, stock availability, or new products.
- Lead Generation: Encourage sign-ups for newsletters or offer downloadable resources.
Doing this without a plugin offers:
- Improved Performance: Fewer plugins can lead to faster load times.
- Complete Customisation: Full control over how the notification bar looks and behaves.
Custom Code to Create a Sticky Notification Bar
The following code will add a sticky notification bar to the top of your WooCommerce site, allowing you to include a message, a button, and a close feature. You can paste this into your theme’s functions.php file or, better yet, use a child theme.
HTML, CSS, and JavaScript for the Sticky Bar
/*
* Snippet: How to Add a Sticky Notification Bar to WooCommerce Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1516
* Tested with WooCommerce 10.7.0
* "This adds a sticky notification bar with an optional button to WooCommerce"
*/
function wcsuccess_sticky_notification_bar() {
?>
<div id="wcsuccess-notification-bar" style="position: fixed; top: 0; width: 100%; background-color: #f1c40f; color: #fff; text-align: center; padding: 10px; z-index: 9999; display: none;">
<span id="wcsuccess-message">Get 20% off on your first purchase! Use code FIRST20 at checkout.</span>
<a href="/shop" id="wcsuccess-button" style="background-color: #e67e22; color: white; padding: 10px 20px; margin-left: 10px; text-decoration: none; border-radius: 5px;">Shop Now</a>
<button id="wcsuccess-close-bar" style="background: none; color: white; margin-left: 10px; border: none; font-size: 16px;">×</button>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Check if the bar should be hidden
if (!localStorage.getItem("wcsuccess_bar_closed")) {
document.getElementById("wcsuccess-notification-bar").style.display = "block";
}
// Close the bar and keep it closed
document.getElementById("wcsuccess-close-bar").addEventListener("click", function() {
document.getElementById("wcsuccess-notification-bar").style.display = "none";
localStorage.setItem("wcsuccess_bar_closed", true);
});
});
</script>
<?php
}
add_action( 'wp_footer', 'wcsuccess_sticky_notification_bar' );How This Code Works
- HTML and CSS: The notification bar (
#wcsuccess-notification-bar) is styled with inline CSS for simplicity. You can adjust the styles as needed for your store’s design. - Button: An optional button (
#wcsuccess-button) is included, which directs users to the shop page. You can change the URL or style it as you see fit. - JavaScript: The JavaScript ensures the bar is only shown if the user hasn’t already closed it. Once the close button is clicked, the bar is hidden, and the state is saved in the browser’s
localStorage. This means the bar won’t appear again for the same user across other pages until they clear their browser data.
Customising the Message and Button
You can easily customise the message and the button link in the HTML structure:
- Message: Change the text inside the
#wcsuccess-messagespan tag to whatever message you want to display.
<span id="wcsuccess-message">Your custom message here</span>- Button: Modify the button’s
hrefattribute to direct users to your desired page.
<a href="/custom-url" id="wcsuccess-button">Your Button Text</a>If you don’t need the button, you can simply remove the <a> tag from the code.
Adding Shortcodes Inside the Notification Bar
If you want to include dynamic content inside the notification bar (e.g., a discount code, product information, or form), you can use the do_shortcode() function. For example:
<span id="wcsuccess-message"><?php echo do_shortcode('[your_custom_shortcode]'); ?></span>This will execute the shortcode inside the notification bar, allowing you to insert forms, products, or any shortcode-supported content dynamically.
Keeping the Bar Closed After Dismissal
The close button is designed to ensure that once the user clicks it, the bar will no longer appear on other pages. This is achieved by storing the state in the browser’s localStorage. Once set, the bar remains hidden until the user clears their browser data or localStorage is reset.
Why Use localStorage?
- User Experience: Once a user closes the notification bar, they won’t be bothered by it again across multiple pages, improving their experience.
- Browser Persistence: Unlike cookies,
localStorageremains until explicitly cleared by the user or through JavaScript, making it ideal for this kind of persistent UI change.
Best Use Cases for a Sticky Notification Bar
- Announcing Sales: Use the bar to promote a sale, discount code, or limited-time offer.
- Important Updates: Notify users about shipping delays, service interruptions, or any significant updates.
- Lead Generation: Combine the sticky bar with a form shortcode (e.g., from Contact Form 7) to collect emails or generate leads.
Conclusion
Adding a sticky notification bar to WooCommerce without a plugin is a straightforward process that gives you full control over the design, behaviour, and functionality. You can display important messages and offers while giving your customers the ability to dismiss the notification if they no longer need it.
Remember to add any custom code to a child theme to keep your changes safe from theme updates. For more WooCommerce customisations, check out our WooCommerce Visual Hooks Guide and wp-config generator to further enhance your store.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
