Build Your Own Business Website header image

Change Default WooCommerce Colors

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

The next thing we are going to talk about is CSS and how to change default WooCommerce colors on a Thesis 2.3 site. I showed you on byobwebsite where you can download that. Click on Resources on the menu then scroll down to Thesis 2.3 and on the list there is this “Download the Thesis 2.3/WooCommerce snippets”.

CSS Reference Sheet for WooCommerce Store

I’d like to give you a brief overview of that document. This is the file and what I’ve done is I’ve broken out the default color scheme by colors. So, for example, the light green that WooCommerce uses, you can change that color in each of these places and that will change all the locations where that light green is being used.

Each Rule Specific Enough to Override Plugin

I’ve also added enough specificity so that the selector overrides the default CSS. If you were to use the selector that you see in the inspect elements window, it would just be WooCommerce Cart without WooCommerce Page. And that is not specific enough to change the color because this rule would be overridden by the plugin.

So for each of these rules I’ve added sufficient specificity so that if you copy and paste this into Custom CS it will override the default CSS.

Change Two Primary Colors to Match Your Site Colors

There are really two primary colors that WooCommerce uses in its styles that I think you probably want to change. Those are the light green and then that purple. Actually the purple also has a dark purple if you are using a price slider filter.

That purple color is this A color here and the dark purple is this color here. If you were going to change the purple color to say, orange, you’d want to choose a darker orange in that same color scheme for this dark purple.

Grays You May Want to Change

It also uses this light gray color for buttons a lot as well as for borders. These are all the places where that light gray is used and that you may want to change.

The same thing is true for the medium light gray color. It is usually the hover color so you can see that in action. Here’s the light gray and here’s the medium light gray when you hover over it. If you change those colors the changes will show up in places like this. The same thing with reviews.

If you come back over to the shop page, again you’ll see the light gray on Add to Cart. Hover and you’ll see the medium light gray.

Medium light gray is also the text so you’ll see that in buttons. When the buttons had a background color and a text color, I left the text color with it rather than breaking it out separately. You can tell the text color here.

Optional WooCommerce Elements to Change

And then there are some other WooCommerce elements that are likely that you’d want to change. For example, if you wanted to change the price on the WooCommerce page. This would be the way to change that. If you wanted to change the sale price, this would be the way to do that.

Change WooCommerce Messages

Then there are a series of WooCommerce messages. So you can change background color, text color and then border top color to make those more closely follow your design. You can also use these to completely change the messages as well.

I’m just assuming in this document that you are going to keep the message configuration as is and you just want to change colors. But this will give you a hint on how to change other stuff in that message as well.

Change Star Rating Color

Once thing many of you may want to do is change the star rating. Star rating is easy to change because it doesn’t have any color, it just takes the text color that you have or the link color that’s there. So all you really have to do is just drop this in to Custom CSS with the color that you want and the stars will follow that color.

Anytime I’ve put a name like this in, that’s just a standin for any color you may want to use. It is a valid HTML color but that’s not what actually exists there. Nothing is existing and you can put whatever color you want in there.

Change WooCommerce Widget Colors

And then in your widgets WooCommerce has another way of setting colors. So widget links automatically take the links color that you have on your site. So if you want to change the widget links, we’re talking about WooCommerce links in particular, these are the selectors to change for the color and the hover color.

If you want to change the widget text color it’s going to automatically take that color from Thesis. But if you want WooCommerce text to be different then you can use these selectors for that.

WooCommerce widget prices are different than the prices on the products page which we saw above.

How to Use This Document

Chris: Quick Question about the implementation of this file. Is this file called by your box?

Rick: No this is just intended to be code that you cut and paste into the Custom CSS.

Chris: So people are putting this into their Custom CSS. Okay. I’d recommend people cut and paste it at the bottom and also that they curate this and only take exactly what they need.

Rick: Absolutely. That’s what this document is intended for. People should just take the specific code from here that they want to change on their site not this document in its entirety. It would mess your site up if you just took the whole thing. Some of these are just here for reference.

Chris: The way some of them are constructed some of them are just super verbose reference which takes up a lot of file space which is annoying.

Rick: Yeah. But it is verbose enough to be specific enough to override the default WooCommerce selecors.

Chris: This looks about as tight as I’ve ever seen a WooCommerce mod look. So that’s something.

Rick: So your typical price, your original price which only kicks in if you’ve got a sale price and then the sale price. This only applies to widgets but some of the widgets will show you a combination of typical price and then if products are on sale they’ll show you original price and sale price. So if you want to change colors, these are the selectors to do that with.

Advanced Options for Shop Layout

Then for Shop layout, this is really, again, something for the experts among you not the beginners. That’s especially true when it relates to things like height and position.

It irritates me that WooCommerce products don’t line up all the time across the page so I was trying to find a simple CSS solution to that. I realized that there is no simple CSS solution because it has to be modified for media queries.

This rule is if you wanted to change up the products if you used the PHP snippet to change the number of products in a row from 4 to 3 then you would use this CSS snippet to change the width so that it took up the full width of the page. That’s the only time you would use this rule.

And if it was going to be 2 you’d want to mess around with this. This is really your experimental CSS rule because you are going to have to change this in media queries because this will override the WooCommerce media query. So you’ll have to override your overriding it with media queries yourself. It’s really just for the experts to use.

Example Color Change

Let’s implement some color changes now so that you can see some of this in action. Let’s change out this light green to say blue. You could just copy this block of rules, come over to your Custom CSS, paste it and then change the color specified to whatever you want. Come back over and reload it. And the light green has changed to the blue color I just added. The prices were turned blue instead of green. If you go over to the product, the sale price thing is blue.

If you want to change those stars then you just grab that little snippet of code and paste it in Custom CSS. Let’s use the gold star here. Reload it and now you have gold stars.

Those are the kinds of things that you can do with these code snippets. You can essentially change these various parts to fit your color scheme without a lot of messing around.

0 Comments… add one
0 comments… add one

Leave a Comment