From the course: WordPress Ecommerce: WooCommerce

Customizing theme colors

From the course: WordPress Ecommerce: WooCommerce

Start my 1-month free trial

Customizing theme colors

“

- [Instructor] We have our theme installed and activated. Now comes the fun part. Let's customize it and make it match our brand. If you haven't already, click the let's go button to add the storefront homepage template to your site. Then we're going to use the WordPress Customizer. Which will automatically be loaded for us, if we click the let's go button. You can also get to this, by going to appearance and then customize. and if we go into the Customizer, we can see that there's a bunch of settings that we can change. We can change the title, upload a logo, change the header colors, the footer colors, all sorts of things. We're currently looking at the homepage which Storefront automatically created for us, and I'm pretty happy with it because it's a nice mix of content and products. Let's go ahead and start customizing this. The first thing I want to do is upload a logo. I'll go to site identity, and select a logo. I'll select this, which we uploaded before we started recording, and select it, and we can choose how to crop it, or we can click skip cropping. That logo looks pretty good. And then we can choose to modify the site title. In this case, it says H+ Sport and it doesn't actually do anything, because the logo has replaced the site title, but it will show up in the HTML of your page, which affects SEO and how visually impaired people might access your site. So you definitely want to put something here, even if you can't see it. Let's go back and now let's customize the header. We can go ahead and add an image here, or we can choose a background color. Let's start with an image. Here's an image I uploaded earlier. That looks pretty good, let's click crop image. But depending on how your theme works, in this case, the image repeats itself and doesn't look good at certain screen sizes. So I'm going to remove this. I'll click hide image and we can even delete it here. Let's go ahead and instead, customize this with background colors. Let's go for a dark background with light text, so I'll change this to 333, which is a dark gray. And for the text color, let's go for DDD, and the link color, let's do the same thing. There we go. Now we can see our logo, our links, the search box, and everything we need to. The one thing I might want to change is make this just a little bit lighter, to make sure that people can still see the sport after our logo. So go from 333, to something like 444444. That's a little bit more legible. This looks pretty good. Now let's go back up. Click the back button and go down to the footer. And if we scroll down to the footer. We can see it's pretty boring. So let's go ahead and make some changes here as well. For the background color let's copy what we used above. Which was, 444444. And for the text color, and for the link color, we can also set this to DDD. And for the heading color, which we don't see right now, let's do something slightly different. We've done quite a bit already to the header and the footer. Let's go to a product page and make some tweaks there. Let's scroll down. Here's the product that's most complete so far, so let's go into that product page. And let's go back, and here we can see an option for buttons. And most themes will have this option here. We can change the background color to anything we want. similar to our logo color up here, which is, ADA80D, and we can see that that affected that button right there. Let's change the alternate button background color. now both of our buttons look pretty good. Although I do want to change the button text color, And I'm pretty happy with what we've done. Let's go ahead and click publish, to save all of these changes. The one thing I want to point out, is that not all themes do have options for these buttons. If you theme doesn't have any controls for these buttons, there is a plugin called WooCommerce Colors. It's a free plugin on wordpress.org and it's made by the WooCommerce team. This button will let you change the add to cart button on just about any theme, but of course, if you're using Storefront as I am, you don't need this extra plugin, We've brightened up our theme quite a bit, and the colors match our brand. In fact, let's go back to the homepage and here you can see, the button colors we've chosen earlier affect this page and bring our brand affect this page and bring our brand a little bit more to life. a little bit more to life. With proper imagery, this would look fantastic. With proper imagery, this would look fantastic. Now let's start customizing what shows up on this homepage. Now let's start customizing what shows up on this homepage.

Contents