How to Customize WooCommerce Colors


The first CSS exercise is about customizing colors, so when you’re talking about colors, you know you have to customize CSS and therefore your style.css file. Now, let’s give for granted that my logo is based on the red color. Usually when a designer first takes a brand new WooCommerce website and goes to Customize, also tries to make the colors consistent, okay? So, if the logo is red, then you also want some other elements to take the same shade of red, for example, the Add to cart buttons, the other buttons, the filter background and some other elements. So, how do we harmonize or make a website consistent in regard to colors if this logo is red? Now what I want to do first is actually to simulate the color of my logo so I can show you live how we can then work on the rest. Now what I’ve done, I’ve right clicked on my site name and I’m trying to look for the CSS call that gives it a color. Here it is, the very first one gives it a color of dark gray, so what I wanna do is I just go here and give it color. A red. So, remember, we’re simulating, so if I refresh the page, this is going away, so let’s say that my logo is red, now I want to customize the red Chrome home page icon. I want to customize the Add to cart buttons, I want to customize the pagination buttons and I want to customize the footer background which is the easiest one to do. So, let’s start with the footer. I right click on the gray background of the footer and click on Inspect. I’m now looking for some call that gives me the gray background but as you can see, if I hover onto the element I just inspected, it doesn’t give me the whole footer, so I have to go one step up and maybe the footer color is this on. It’s probably not ’cause you can see gray above and below, so I keep going up until I find the whole parent element which as you can see has a background color, okay? So, what I wanna do here is adjust simulate that the background color becomes red. And of course you also want to make sure that the color becomes, for example, white. And you probably need to customize link colors as well. Now this is a simulation, so what I do is take this customization, I go to my FTP, I right click on style.css, Edit. Open my style and what I say is FOOTER as a comment so that remember in that area I’m customizing everything about the footer and paste my customization. I save, I go back to the FTP and send the file back to the server. Now I go back to the live site and do a refresh just to double check that the logo color is going away of course ’cause it was a simulation but the footer stays because now it’s in my style.css. Let’s move on further and let’s try to customize the Add to cart buttons as well. So, once again, right click, and make sure we are on the correct element and let’s go and find the call that gives it a background color and a color. Once again I want to enter here red, small letters and I want to give it a color of white. Okay, so as you can see, they’re finally customized in my simulation, so I copy this part and I go to my style.css and open it again. This time I want to call my CSS section WOOCOMMERCE and paste my new CSS once again. I’m going to save, there is a typo here, save and go back to my FileZilla and upload the file back to the server. Now go back to products, refresh and I should be able to see my red buttons and my red footer which makes an amazing website, very good looking. Now next thing, the pagination buttons, so I’m just going to right click on the one and hover onto it and find out what gives the number a background. If I’m not sure and that this is the right element, you can just simulate it, so you just click on the square and move it around, so as you can see it is the right button, so this is the call. I’m just gonna give it a background color of red and a color of white. Now you can see that only the first one changes, not the other ones as well. Why? Because I’ve inspected the element of the current page number only, okay? So now only have to customize this one but I will have to customize the buttons that are not current. For now I’m just going to copy this call, go back to my style.css and paste the pagination call. I save and if I really want to see the results, on the front end, I upload the file back to the server, wait until the transfer is finished and then refresh. So, we see now the first pagination button is red, Add to cart buttons are red as well as the footer. Finally we can even match this little Home icon if you want to and maybe the store front cart icon. You can apply this to any theme as long as you’re very good at inspecting the element. Now what I do, I position the mouse over the house, I right click and try to look at where this icon is coming from, so having inspected element of this, it opens the whole a href of the home page, so you see, if I hover onto it here in the HTML window, the whole element on the front end is highlighted, so I’m not going deep enough yet, so I can expand this element and find the home and as well something called the before. This called a seldo element in CSS which means that you can target something that is before or after a certain CSS type and just make it behave like a HTML element. So, the before, if I hover onto it, it correctly highlights the little icon, so I’m clicking on the before element and trying to find out what CSS is assigned to it. It’ll give me the CSS call and then the CSS styles. Let’s see if there is a color somewhere. Well, there is not, okay, so because there is not a color, it means that this inherits the color of this parent HTML tag which is the a tag. The a tag as you can see has a color of 727272 but I want to give a color only to my icon, so I go back to the before and this time I don’t change it. This time I create it, so I just give it a color of red. As you can see, this is now changed and I can copy this all CSS but you have to be careful and I’ll show you next once I go back to my style.css file and paste the code. I’m only interested in color: red, so I’m going to delete these declarations and just leave what I want. I save this file and if i really want to see the results on the live website, I upload the file back and do a nice refresh. Now I should see my red icon in here and the same exact way that we wanted it. Now I want to customize even this one as a test. I right click on it, I Inspect Element, I find out that the a is way too much, then what I need, I just want to target the cart icons, so I go and search for children of this HTML element. There is the price amount, there is the zero item count and then there is the after, so once again this after is an element that is basically called inside this a element and might have its own color or not. You see there is no color call for this site-header-cart cart-contents::after, so once again, I need to create it and just say color: red. Simulation is successful. I take this part and go back to my style.css and remove all this. Now, I just want to show you one last work which you can see these two CSS calls are the same. I mean they give the same style to the color, okay? So, you can even merge them, so this one and this one become actually comma. This one and I can delete this old call. So, I’m assigning the color red to both the breadcrumb home page icon and the cart header icon. I save. I upload the file back and finally after a refresh, I now have my consistently colored red WooCommerce website.


Please enter your comment!
Please enter your name here