In this Woocommerce tutorial I will show you how to customise your Woocommerce colors.
The color scheme of your website is important and plays a large role in how your shop looks, and how you are perceived.
There are a couple of ways of changing the Woocommerce colors used on your online store.
The easy way is through your theme customiser. If you have a theme designed for Woocommerce there should be lots of built in customisation options for Woocommerce, including the ability to edit the colors.
The second way is by using custom CSS to target the specific Woocommerce classes on your website and change the colors used.
Using the theme customiser to edit Woocommerce colors
Most good themes that are compatible with Woocommerce have a built in Woocommerce customisation section, like Divi for example.
However, a lot of the multipurpose themes do not have good support for customising Woocommerce colors, which is why you may have to use the custom CSS method.
Using custom CSS to change Woocommerce colors
The second way you can change the colors on your Woocommerce store is through custom CSS.
Using this method, you can locate the specific buttons or elements you wish to change and write simple lines of CSS to alter the colors.
For example, let’s say you wanted to change the color of the product buttons.
You would follow this process:
- Right click on the button and click ‘View Source’
- This will open up a console that by default lands on the class you need to target for the button (shown below)
- Copy the class from the Styles section of the right part of the console
- Write a line of CSS to change the color using your Custom CSS section (in Divi this is additional CSS)
For example, look at the code above in the Additional CSS part of the Divi Customiser.
I’ve targeted the button class, copied it then pasted it into the additional CSS module.
I’ve then used two basic lines of code to change the background color and text color.
You can learn basic color CSS queries from w3 School free online.
Notice I’ve also included a hover class to edit the colors when you hover over the button. This is actually super easy and not as hard as it looks.
Just copy the same class and add :hover to the end of the class then write your code.
Once you are happy with your new Woocommerce colors click publish and your changes will be brought live on your store.