My Courses > CustomizeWoo > Module 3 > Lesson 03: Customize WooCommerce Colors (Free)
Customize WooCommerce Colors (Free)
Changing colors is the easiest thing in CSS, or is it? Thankfully, “Inspect” comes to the rescue.
Video
Please note: English captions are enabled by default (click on “CC” in the video player to disable). Also, you can click on the “gear” icon to manage quality and playback speed. Enjoy!
Sorry, this video is visible to logged in and fully registered students only.
If you already enrolled in this course, please LOG IN
Otherwise, please enroll in the FREE / PRO COURSE
For any other queries, feel free to get in touch
If you already enrolled in this course, please LOG IN
Otherwise, please enroll in the FREE / PRO COURSE
For any other queries, feel free to get in touch
18 thoughts on “Customize WooCommerce Colors (Free)”
Questions? Feedback? Support? Leave your comment now!
_____
_____
If you are writing code, please wrap it between: [php]code_here[/php]
This was really helpful! It was such an ah-ha moment for the amateur that I am to realize how easy it is to find/correct things on my website using the inspect tool – being able to simulate/copy & paste into my CSS file just saved me a ton of time and headaches! 🙂 Loving your courses…thank you!!!
Glad to hear that!
Rudolpho, I am really enjoying your course…. I have taken other basic courses but they don’t help me solve a problem that I need to solve. You’ve provided more tools and an interesting philosophy that I actually agree with: Put customizations in a file, not the database.
But this brings up another question about so many page builders and themes – where you can often quickly adjust things in their customizer – which of course, ends up in the database.
Sometimes though, they can waste time…. as in, “Gee, where was it that I made that change?”
Do you have an opinion on whether it’s best to or some rule, as to how one should make changes, even if there is a theme customizer/page builder available?
Best to do as much styling as possible in the style.css file instead of the Page Builder?
Separate from that, page builders and themes also give you the opportunity to do other further custom css – sometimes in several places, so you can see changes before you commit to them – but again, they are saved in the database and not written to the style.css file.
And now even WordPress’ JetPack offers that – but after some mistakes and errors, I now realize that no matter what, it’s best to make further css customizations in ONE place! 🙂
Yes, put all code in style.css whenever possible.
I just worked on an Elementor website recently, and they have code in style.css, in the WordPress Customizer > Additional CSS, in the Elementor template sections, rows and elements.
This can get really messy indeed.
So, if possible, pick a single location, and place all your CSS in there!
Hi! How do I change the default colors of woocommerce messages. Error messages (red), cart added (green). How can I change them?
Hi Rafael!
It should be something along the lines of:
/* GREEN */ .woocommerce-message { background-color: yellow; } /* RED */ .woocommerce-error { background-color: #112233; }Hi!
In this example, at around the 10:00 mark.
Say we want to change the “line height”, but it’s shown as strikethrough.
What does it mean and how do we change it?
Thanks!
Good question! You have to look inside that window who is giving the “winning” line-height value. Maybe there is an “!important” somewhere, or there is a different CSS selector. In which case, you need to use that exact selector in your custom CSS code. Hope this helps 🙂
Hello
I would like to have a custom CSS “Add To Cart Button” only for a specific product. I put the custom CSS code on “.single-product .product .single_add_to_cart_button.button” and it works. But how to make to have this CSS style button ONLY for a specific product, not for all? Just a hint, please. Thank you!
Example here: https://www.screencast.com/t/YT9bVfjmRW
Hi Marcel > https://businessbloomer.com/woocommerce-apply-css-changes-one-pageproduct/
Hi Rodofo,
I’m considering purchasing the pro version of this course. My hesitation is that the videos have no speed control available. Is it possible for you to enable that in Vimeo?
Thanks,
Fred
Hello Fred, thanks so much for your comment! Yes, there is a free Google Chrome extension that allows you to add 2 buttons to the Vimeo player: repeat and playback speed (screenshot: https://screencast.com/t/5YOOcDLM5E). Link: https://chrome.google.com/webstore/detail/vimeo-repeat-speed/noonakfaafcdaagngpjehilgegefdima
I signed up for this with my E-mail and now there’s no content. What’s the deal?
Hi Michael, this has been discontinued – please subscribe to the free version of #CustomizeWoo 2.0: https://businessbloomer.com/customizewoo-master-woocommerce-online-course
Excelent! I’ve been searching this course for a eternity and now i found it.
I got just one question, though: for creating a child-theme is basically to create a new directory in the wp-content/themes with the same name of the parent-theme?
Thanks for helping me already.
Hello 🙂 No, it must have a different name. All info here: https://developer.wordpress.org/themes/advanced-topics/child-themes/
Really useful video with good instructions and explanations
Thank you Pete!