How to Customize The WooCommerce Store Notice and Stop It from Covering Your Header

Is the WooCommerce Site Wide Notification covering up your header? 

In this article we’ll explain what a temporary Store Notice is, how to add one, how to customize it, and how to prevent from obscuring your header.

Table of Contents

1. What the Store Notice is use for
2. How to add a Store Notice to your website
3. How to stop the Store Notice from covering up your header
4. How to change Store Notice’s background color
5. How to remove the “Dismiss” button

What is Store Notice in WooCommerce?

The Store Notice is a great way to show a temporary message on your WooCommerce store.

Common uses for WooCommerce Store Notices:

• Tell your customers you’ll be out of town for a few days
• Promote a sale
• Announce a new product
• Notify about a short-term technical difficulty

How do I Add a Store Notice to My Website?

1. Log into your website

2. Go to Appearance > Customize (in left nav).

3. Go  to WooCommerce > Store Notice.

4. Write your message

5. Check the “Enable Store Notice” checkbox.

5. Click the “Publish” button to save the changes.

And now for the meat of the article…

How Do I Prevent My Store Notice from Covering the Header?

By default, the WooCommerce notice covers up your header. This makes it difficult for customer to click on link or even what website they’re on.

Yes, there’s a ‘dismiss’ button but this hides the message. But once they press dismiss the message goes away and won’t come back. Since the message gets in the way of their interactions many customers will dismiss the message without ever reading it.

That sort of defeats the point.

A better solution is to have the banner push the content down and have its own space. Luckily there’s an easy way to fix this with some simple CSS.

Best Solution

A better solution is to make the banner sit at the top like a normal element and then CSS grid to move it to the top.

Copy and paste this CSS code:

body {display:grid;}

.woocommerce-store-notice, p.demo_store {
position:static;
order:-1;
}

Other Solutions

When reading about this topic on forums most people suggested putting margin-top:45px; on your website’s wrapper. This kind of works, but isn’t very flexible.  The notification is still floating above your content so it might still cover your header in certain situations (like on smartphones).

Where Do I Put This CSS Code?

Not sure how to add the CSS to your website? Here’s how to do it…

1. Log into your WordPress Dashboard
2. Go to Appearance > Customize
3. Click “Additional CSS“
4. Paste the code in the text area
5. Click “Publish” to save the changes.

Bonus 2: How To Change the Notice Color

The default banner is a pinkish-purple color by default. You might want change the color to better match your website’s branding.

Simply add background-color as shown below…

body {display:grid;}

.woocommerce-store-notice, p.demo_store {
position:static; 
order:-1;
background-color: #a11;
}

This code will make the store notice a bright red color.

You can change the color to anything you want.

Here’s an example that makes the background white, and the text black…

body {display:grid;}

.woocommerce-store-notice, p.demo_store {
position:static; 
order:-1;
background-color: white;
color:black;
}

Bonus 2: Remove the Dismiss button

Since the banner no longer covers the header, you might want to get rid of the dismiss button.

This code will remove the dismiss button (and customize the colors)…

body {display:grid;}

.woocommerce-store-notice, p.demo_store {
position:static; 
order:-1;
background-color:gold;
color:black;
}

.woocommerce-store-notice__dismiss-link {
display:none;
}