Join Patrick Rauland for an in-depth discussion in this video Customize theme colors, part of WordPress Ecommerce: WooCommerce.
- [Instructor] We have our theme installed and activated. Now comes the fun part. Let's customize it and make it match our brand. I'll click Customize up here in the top menu bar, and this will load the WordPress Customizer. If we go into the Customizer, we can see there's a bunch of settings that we can change. We can change the title, we can change the logo. We can change the header, we can change all of the colors throughout the site. There's a lot of stuff that we can do here, but there is something missing. We can't change any of the colors that come with WooCommerce.
For example, this Add to cart button. We want everything to be cohesive, so before we start customizing the colors, we're going to install a plugin that lets us customize the WooCommerce colors at the same time as we customize all the rest of the colors. There's a great free plugin called WooCommerce Colors made by the WooCommerce team. Let's go ahead and install this before we continue customizing. I'll go back to my admin, Plugins, Add New, and then I'll search for WooCommerce Colors.
There's the one made by the WooThemes team. It's installed and activated. Now let's go back to the Customizer. Appearance, Customize, and it added a whole new tab here that lets us customize the WooCommerce colors. Before we get there, let's customize the most obvious stuff, like the logo and the header. We'll go to the Site Identity, and first, we should add the logo. This looks good.
That looks good but it's not transparent. I have a separate file that is transparent. I'll select this file, make sure it's the right size. That looks much better. Let's go ahead and add a site title. This will appear if we don't have a logo, but since we do, it won't show up. The Tagline is fine, and the site icon is fine for right now. Let's go ahead and add a new header. I'll click on Add new image.
I already have a header image uploaded in my Media Library. I'll select it and then click Select and Crop, and I want something like this. There it is. Before we move on, these nav items right here are a little bit hard to read, so we're going to have to change the text color. There's Link color right here, and I can change that to anything else I want. Some sort of gray will be fine.
Little lighter, that's much more readable. Now we can continue. The footer should be mostly fine. If we wanted, we can make it a darker color, and we could do the same thing with the link. Before we go on, we want to change the color of these purple Add to cart buttons. We can change the ones on the product archive page, that's this shop page, by going to Buttons, and then Background color. When you're choosing the color of an Add to cart button, you want to make sure that you're using a color you haven't used before elsewhere in your design.
Purple would actually be great if that was part of our branding, because we haven't used it anywhere else throughout the site, but since that's not part of our branding, I'm going to use this yellowish greenish color in our logo that we haven't used anywhere else, so it will still pop out. Perfect. Now we can go ahead and go into a product page to change a few more things. Let's go back, let's go to WooCommerce, and then Primary Color, and we'll do the same thing. We also don't have green in our color palette, so I'd like to change the sale price here, or just the price.
I'll go to Highlight Color and I'll select anything else. I think a light gray will be fine. You can keep navigating throughout your site. You can look at blog posts. You can go back to your About page, or your front page, and just make sure that everything looks right, and then when you're ready, click Save & Publish. That's an overview of how you can customize all of your theme colors in the Theme Customizer.
- Why WooCommerce?
- Installing WooCommerce
- Setting up your store
- Adding products, including images and data
- Creating a subscription product
- Setting up shipping
- Configuring payment options
- Setting up taxes
- Customizing your theme
- Connecting Google Analytics and MailChimp
- Managing orders and reports