Patrick's Programming Blog

How to Add a WooCommerce Announcement Bar

Announcement Banner

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.

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.

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.

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!

Exit mobile version