Join Patrick Rauland for an in-depth discussion in this video Match theme colors, part of WordPress: Customizing WooCommerce Themes.
- View Offline
- [Narrator] You will need to tweak most themes once you install WooCommerce. If you look at the single product page, we'll see a purple View Cart button. And if we add a product to the cart, we'll see a green banner. If we go to the Cart page, we'll see more purple buttons. So, unless your brand colors happen to be purple and green, there's a lot of things that need to be customized to make WooCommerce match your brand. You can customize all of this with CSS, but there's actually an easier way. There's a free plugin called WooCommerce Colors, made by the WooThemes team, that helps you style all of this without writing any CSS.
I'm going to go to the backend and install this plugin. Under Plugins, Add New, I'm going to search for WooCommerce Colors and install the one made by WooThemes. Once I activate the plugin, under Appearance, Customize that'll pull up the Word Press customizer. There's a new menu called WooCommerce and this new menu will let me customize all of the buttons in WooCommerce. But first, I need to pull up a single product page. The Primary Color option will change the Add To Cart button. The general rule of thumb is that you want to have an Add To Cart button that contrasts with the rest of the site.
And hopefully, use a color that you haven't used elsewhere in the site. I'm going to use a color that we haven't used yet, it's the yellow in our logo. And the yellow happens to be this color. Now that this button stands out from the rest of the site, I'm going to continue to customize the other options. The Secondary Color changes a lot of the other buttons. Notice the View Cart button on the right. The Highlight Color effects some of the prices on the single product page, as well as the shop page. The Content Background Color doesn't do anything in this theme because of the way the tabs work.
But in some themes, it will allow you to change the background of the tabs. And the Subtext Color will let you to customize breadcrumbs and a few other options throughout the site. I'm going to keep all of these as the default option with the exception of the primary color because that one didn't match the rest of the site. Now, we have the WooCommerce styles matching our brand which is an awesome start and this is a perfectly good stopping point. But if you want to take your development game up to the next level and customize individual CSS rules you may want to pull out all of the CSS that the plugin generates and include it manually in your theme.
You can do this by visiting a product page and going through the source code. Look for WooCommerce Colors and you'll see a block of CSS. You can copy that block of code and paste it into your theme. This works but if you want to edit it you'll want to make it more readable and right now it's minified. Many code editors have a tool to un-minify CSS but you can also use free online tools. I'm going to be using unminify.com. First, I need to copy all of this code and I'm going to paste it into Unminify. Now I can take all of this code and paste it into my themes style.CSS file so that it's saved.
One important thing to note is that we're using a child theme. Child themes allow us to make changes to the theme and not have to worry about losing all of our changes with an update. You can see more on the wordpress.org page about child themes. The only thing you want to make sure you do is remove this style tag on the bottom and remove the style tag all the way at the top. Since we're in a CSS file, we don't specifically need to say that these are CSS styles. Now, if we go back and disable WooCommerce Colors, we'll see that all of the changes remain.
And if you need to make more changes, I recommend making them within the CSS file.
This course covers the fundamentals of building custom WooCommerce themes. Learn about using WooCommerce hooks, template overrides, PHP, and CSS to style the different store pages, and add custom imagery and icons to fit your branding. Author Patrick Rauland also introduces UX design techniques that encourage customers to buy, such as highlighting savings and adding social media icons for sharing.
- Selecting a base theme
- Matching theme colors
- Overriding and updating WooCommerce templates
- Using hooks
- Modifying your product page: images, tabs, icons, and more
- Modifying the shop page, including customer savings
- Modifying the checkout page
- A/B testing your changes