Customizing a Theme: Best Practices

The best thing about WordPress and WooCommerce is code and content can be changed to suit — modify and customize your website entirely.

Flexibility is one of the greatest benefits to using WooCommerce to sell online. Plugins, extensions and themes can be used to fulfill requirements, then adjusted and coded to tailor the look and functionality of your site.

However, there are some best practices to follow when making site tweaks, and it’s not always obvious how these changes must be made.

Why Best Practices ↑ Back to top

Many users customize their theme from the default look, changing the link color and also the layout and feel. Most dive straight in and modify code, which is the easiest way to do it. But this leaves the problem of updating in the future, since all modifications are lost when files are overwritten with a new version.

What we want to show you in this tutorial are the best ways to customize your theme, so updating is as painless as possible, and you are in control of customizations.

There are two ways to customize:

  • Plugin — minor changes
  • Child theme — major alterations

Using a Plugin ↑ Back to top

If you only plan on making minor modifications to the stylesheet or CSS, then the best option is to use a plugin that allows you to add custom styling.

Jetpack

Our recommendation is to use Jetpack.

Install Jetpack. Once that is done, go to your website > Dashboard > Jetpack > Settings and enable Custom CSS.Custom CSS in Jetpack

Next, you can go to Appearance > Edit CSS. There you’ll be able to add all your custom CSS styles.
Simply copy the CSS you want to change from style.css (or alt. stylesheets in /styles/*.css folder) into the custom.css file, and edit it from there. This will effectively overwrite the style in style.css as the custom.css stylesheet is loaded after style.css on page load.

Example

Let’s look at an easy example where we use Chrome Dev Tools to find the navigation link color in the Storefront theme. We inspect the element as follow: right click on the element > inspect, and it will show us what the style for the nav element is called.
Chrome Dev Tools Inspect

We see in the screenshot above that the style for the link color in the navigation:
Styles to visible in Chrome Dev Tools

.main-navigation ul li a {
  color: #ffffff;
}
.main-navigation ul li a:hover {
  color: #e6e6e6;
}

Then we paste this into custom.css, we want to change the color so to red, and the hover color to white. We also remove the other styles which we won’t be changing so it ends up looking like this:

.main-navigation ul li a {
  color: red;
}
.main-navigation ul li a:hover {
  color: white;
}

Once you save custom.css and refresh your page you will notice the nav link color is now red, and if you hover over it, it will turn white.

Changes after applying custom CSS
Changes after applying custom CSS

You can also add new styles to your the stylesheet to supplement those already in the theme. If the theme ever gets updated, Jetpack will keep your styles intact. We always do recommend backing up your theme before updating to a newer version, and also check out our upgrade tutorial on how to do it.

Code Snippets ↑ Back to top

The Code Snippets plugin allows you add snippets to your site, write a brief description so you know what it does, and activate or deactivate these snippets as needed.

codesnippets

Using a child theme ↑ Back to top

If you wish to modify the stylesheet or CSS of a popular theme, then the best option is to use a child theme to preserve customizations against future updates.

Buy a child theme ↑ Back to top

Many popular themes have child themes that can be installed and activated to modify the look of the parent theme without coding or styling adjustments.

Should you want to make changes, then you still need to preserve custom code against future updates. Code Snippets, mentioned above, can assist with that, but prefixing the snippet name with Theme-ThemeName. You can then deactivate these snippets when you change themes, or re-enable or edit if needed.

Set up a child theme ↑ Back to top

You can also create your own child theme using our tutorial, Set Up and Use a Child Theme.  More on how child themes work also on WordPress.org at Child Themes.

Resources ↑ Back to top

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top