WooCommerce Sitewide Notice Location and Usage

WooCommerce has a wonderful feature that’s called WooCommerce Store Notice or WooCommerce Sitewide Notice. This awesome instrument allows you to put out any dismissable message throughout your entire site in just a few clicks.

How WooCommerce sitewide notice works

To enable WooCommerce sitewide notice you need to:

1. Log in to your WordPress dashboard
2. Go to Appearance -> Customize -> WooCommerce -> Store Notice and check the “Enable Store Notice” checkbox:

How WooCommerce sitewide notice looks

After that your WooCommerce store notice should appear on your site. In different themes it looks differently. For example, on Ellie Multipurpose WordPress theme it looks like this:

On Storefront theme it looks like this:

How to change WooCommerce store notice location

WooCommerce sitewide notice is located at the bottom of your site in both of the themes mentioned above. However, you may want it to be located at the top. Because you like it better that way, or because you have a WooCommerce cookie notice message at the bottom already, and you don’t want your footer area to be overcrowded with messages. There is a simple solution! Just add the following code to Appearance -> Customize -> Additional CSS:

/* Change WooCommerce Store Notice to top */
.demo_store {
top: 0px !important;
bottom: auto;
z-index: 999;
}

and, if in your theme WooCommerce Sitewide Notice is located at the top by default, use the following code to bring it down:

/* Change WooCommerce Store Notice to bottom */
.demo_store {
bottom: 0px !important;
top: auto;
z-index: 999;
}

Other parameters

You can also influence other parameters of the store notice. For example, you can influence the background color of the notice strip and the text color:

/* Change WooCommerce Store Notice to top and tweak some colors */
.demo_store {
top: 0px !important;
bottom: auto;
z-index: 999;
background-color: #00ff00;
color: #000;
}

The code above will change notice’s background color to green, and text color to black.

Use store notice as WooCommerce cookie notice

Few people realize that WooCommerce includes everything you need to create a basic sitewide cookie notice without any third party plugins or coding tricks. Well, maybe just add some htmk code to add a link to this policy in the store notice text.

You can implement this simple text with an html link:

And here’s the result: