How to change the background color of the WooCommerce Store Notice

Share Post:

Disclosure: I am an independent blogger and the reviews are done based on my own opinions. The information in this article is based solely on my own experience using the product. If I have not used the product, I will never give a review of it. My posts may contain affiliate links. You won’t pay a single cent more if you buy something through one of those links. But I’ll get a small commission, I would greatly appreciate it and, in this way, I can produce more valuable content in the future. Click here to read the full disclosure policy. Thanks!

Hi everyone, in this tutorial, I am going to show you how to change the background color of Astra Theme‘s Woocommerce Store Notice. 

I have uploaded this entire tutorial on Youtube. Feel free to like and subscribe to my channel for my upcoming tutorials if it helps! Continue reading if you prefer reading as I do. 

So, let’s get started! This demo page design is a template imported from Astra Starter Templates. Go to Customize -> WooCommerce -> Store notice, and click on the check box to enable the feature.

You can write your message in the text box.

The default color is a purple background with white text. Currently, there is no way to change the colors in the global color settings.

The color setting only allows you to change theme color, text color in normal, active, and hover states.

Hence how do we change the colors?

Add the CSS code to change them. Go back to the main page, and click Additional CSS.

Key in these codes, and you will see the changes instantly. You can either enter the name of the color or color code to change them. 

					p.woocommerce-store-notice.demo_store {
    background-color: aliceblue;
a.woocommerce-store-notice__dismiss-link {
    color:darkblue !important;

Click Publish to save your changes, and that’s all for this tutorial.  You can find my full review with a comparison of Astra Theme and Neve Theme in my previous post.
I hope this helps with your web design.

You can get Astra Theme for free or purchase their PRO bundle with this link. 

Feel free to like and follow my blog for more upcoming tutorials, see ya!

23 thoughts on “How to change the background color of the WooCommerce Store Notice”

    1. Hi Natalie, you can simply add this code below “color”:

      p.woocommerce-store-notice.demo_store {
      background-color: black;
      text-align: center;
      font-weight: bold;

  1. Hi, this was very helpful. Is there a way to change the background of the whole shop page. When I change the backgorund in the customize it just gives a box around it with Woocommerce things still have a white background. Thank you!

  2. Same here..Thank you so much! Couldn’t find it in the default WooCommerce color settings. But adding this piece of code took care of that ugly purple color in one go! 😉

Leave a Comment

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.

You May Also Like

Cloudways Web Hosting Summer Deal Banner Image

Cloudways Summer Deal: Up to 30% OFF + Free SSL Certificate

It’s an oversight! There is a summer deal for Cloudways until 25th August 2022 -> Get 30% off all plans for 6 months! This amounts to almost two months of free hosting.  What is Cloudways Web Hosting? Cloudways simplifies your web hosting experience with a managed cloud hosting platform. As opposed to traditional hosting providers using

Elementor is 6 years old! Up to 60% off everything.

Interested in creating your own website or becoming a web designer? Have you been struggling with WordPress for too long? It’s about time you tried Elementor, a WordPress page builder! What is Elementor? Elementor is a revolutionary WordPress plugin that enables you to create beautiful, dynamic, responsive pages quickly. Your WordPress website is at your

Free resources for your design project
Why I chose Astra Theme over Neve Theme
How to change the background color of the WooCommerce Store Notice
Photoshop CC - Removing Number Sequence for Export Layers to Files
How to save money on IT expenses with Appsumo
Elementor is 6 years old! Up to 60% off everything.
1 2 3 4
I hope that the information I have shared will prove useful for your business or work. If you find it valuable, I would greatly appreciate your support through a tip to help with the maintenance of the website. Thank you!
Scroll to Top