How to Add a WooCommerce Announcement Bar

Announcement Banner

Imagine it's the week before Xmas and you realize you forget to get a present for someone. You start looking for the perfect gift and you manage to find it. It's exactly what this special someone would love.

You add it to your cart and as you start looking at the shipping options you realize you don't know if it will arrive in time. There's “free shipping” – who knows how long that will take. And there's “expedited shipping” which will probably get there on time but you don't know if it's worth the extra $20.

You start googling rates, prices, and shipping times and you go down a rabbit hole and might never come back to that site.

It's the holidays and we're approaching the cut off date to get presents on time. As a store owner you want to let your customers know the last day they can order and still get presents. This does two things:

  1. It removes uncertainty. If you're uncertain if the present will get there on time you might not order. Or if you have to do a bunch of work to guess if it comes on time you might just get lost down the rabbit hole and never come back and order.
  2. It creates urgency. When users come to your site and they see a banner that lists the last day to order it creates pressure. They don't want to forget the present and they don't want to miss the cut off date. They will be more likely to buy right now.

Turn On the WooCommerce Announcement Bar

One of the great things about WooCommerce is they included this functionality for free in the plugin. You don't have to download anything. You just have to click the mouse a few times.

Under WooCommerce -> Settings you'll want to check Enable site-wide store notice text.

WooCommerce Store Notice Settings

Turn on the site-wide store notice setting.

And then a text field will pop up. Enter the last day which they can order to guarantee delivery.

WooCommerce Store Notice Text

Enter your message. Keep it short and concise.

And a little tip here. Use active voice. It's more direct and it's easier to understand. I see a lot of store write something like:

The last day to guarantee delivery by Christmas Eve is December 19th.

You can do a lot better by switching it to active voice:

Order by December 19th to guarantee delivery by Christmas Eve.

it's super straight forward. I know what I have to do and when I have to do it.

Just make sure to press Save Changes at the bottom of the screen. 🙂

Change Color of the WooCommerce Store Notice

Once you have the announcement bar on you'll likely want to customize it. With WordPress 4.7 you can now change colors like this with the customizer.

In the admin of your site go to Appearance -> Customize. And then go to Additional CSS near the bottom of the menu.

WooCommerce Customize Store Notice Colors

Customize the colors of the announcement bar

You can see the custom CSS I wrote. Enter a hexvalue for the background-color and color.

If you don't know how to write a hexvalue you can get hexvalues with free tools.

Press Save & Publish when you're done.

Storefront Announcement Bar

I use Storefront which is a free theme from WooCommerce. And in this theme the notice is actually at the bottom of the page because there are already a few sticky menus at the top.

If you have a sticky menu you don't want another thing at the top. This makes it a lot more noticeable for your users.

Conclusion

You should have a fully customizable and useful announcement bar for your store. Now your users will have all of the information they need with a bit of urgency so you capture more sales.

Happy selling!

13 thoughts on “How to Add a WooCommerce Announcement Bar

  1. Thanks for this!

  2. Hi,

    I’ve added the announcement bar but it isn’t responsive on mobile devices such as an iphone. I’ve been playing around with the css display element but nothing seems to work. Any suggestions?

  3. Thank you so much! Your directions were so clear and extremely helpful! Your blog is now my go-to for when I need help with my programming! Thank you so much!!

  4. Thanks for this – as a heads up, the ‘Store Notice’ setting is no longer in WooCommerce > Settings, but in Appearance > Customise

  5. Hello,

    Thanks for this.

    Just wondering if we are able to make the store notice banner permanent, without having the user to clear cache for the banner to appear again.

    Any assistance is greatly appreciated!

  6. Can I add a hyperlink within that announcement bar? I’m asking my users to subscribe to something, but I want to give them the link within that bar. Possible? (like a href tag or something)

  7. Do I type the code exactly how you did or do I say shop_notice? I’m confused because the color isn’t changing when I hit publish. Thank you!

  8. Stainless Pegs

    Thank you for this help, very useful!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.