How to change the background color of the WooCommerce Store Notice

Share Post:

Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
Share on email

Disclosure: I am an independent blogger, and the reviews are done based on my own opinions. 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, which helps keep the lights on. Click here to read the full disclosure policy. Thanks!

I bought Astra Theme lifetime agency bundle a year ago, and I still use them to this day on unlimited websites. That is why I created a video to guide you on some of the common problems I’ve encountered so far.

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: black;
    color:#FFFFFF;
}
a.woocommerce-store-notice__dismiss-link {
    color:grey !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!

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

How to add email accounts into your Gmail?

Send/receive business emails via Gmail Do you know that you can read and compose an email with multiple email accounts in Gmail?  *Note: You can do so other email providers such as Yahoo!, Outlook. I prefer Gmail.  As a business owner, I have subscribed to budget mail hosting services for my business emails. Such services

How to save money on IT expenses with Appsumo

Disclosure: I am an independent blogger, and the reviews are done based on my own opinions. 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, which helps keep the lights on. Click here to read the

Scroll to Top