Creating Custom WooCommerce Themes

WooCommerce is the world’s favourite eCommerce solution giving you complete control to sell anything on a WordPress platform. We’re going to teach you how to create custom WooCommerce Themes and how to edit the existing ones.

If you happened to miss out on our blog post about WooCommerce and it’s core features now’s the time to read it.

Let’s create WooCommerce Themes!

Declare WooCommerce support

Before we start to style our WooCommerce Themes we have to declare WooCommerce support in our theme.

If you don’t do this, your users will get a message in the WordPress dashboard which says the theme is not supported with the WooCommerce plugin. This is very important especially if you’re planning on selling your theme.

It’s very simple to disable this message. All you have to do is add this simple code snippet to your themes functions.php file.

Styling WooCommerce Themes

Now it’s time to style WooCommerce elements and give them a new look. WooCommerce comes with default styles and we’re going to override them with new ones.

Once yo’ve update your WooCommerce plugin, all of your changes will be lost if you edit original files created by WooCommerce. Because of this we’re not going to edit WooCommerce files at all. We have to create new ones to override existing files in the WooCommerce Themes source directory.

We can style WooCommerce Themes in 2 ways. With the first one we create a custom CSS file that overrides original WooCommerce styles. The second way is to style it with a WordPress child theme.

1. CREATE CUSTOM CSS

If you’re going to do minor changes on your WooCommerce Themes then this is the best way to do them.

The first thing you have to do is to create a new .css file called “custom-woocommerce.css”. We usually place this file in the
wp-content/themes/your-theme-name/css
directory but you can place it somewhere else if you want / need to – that depends on your theme file structure.

After you’ve created “custom-woocommerce.css” don’t forget to include it in your theme. All you have to do is insert this code snippet to the bottom of your theme function.php file.

Now you can add your CSS to this file and it will override the existing WooCommerce styles.

2. CREATE CHILD THEME

The second way to style WooCommerce Themes is with a WordPress child theme.

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

We’re not going to write a lot about child themes because there are some awesome resources where you can read more about this topic. WordPress has great documentation where you can find everything you need to know about child themes.

After you create child theme you also have to create a new “custom-woocommerce.css” and override the existing css files with it in your theme.

Editing templates in WooCommerce Themes

We have learned how to style WooCommerce Themes, now it’s time to learn something new – how to edit WooCommerce templates.

The WooCommerce plugin comes with a number of front-end HTML templates. You can find them in
wp-content/plugins/woocommerce/templates.

If there’s an element you want to place somewhere else or maybe remove, then you’ll edit the WooCommerce template where that element was placed.

To edit a template properly once again, we have to create a copy of it and then make the changes.

HOW TO DO THAT?

1. In your theme directory create a new “woocommerce” directory.
2. From the wp-content/plugins/woocommerce/templates directory you have to copy the template you want to edit.
3. After you copy your template go back to the “woocommerce” directory we have recently created. Here you paste the copied template. If the template was copied from a subfolder inside the “templates” directory than you have to create the same directory structure inside the “woocommerce” directory.
4. Finally you can edit your new template and change its structure.

For example, this is how your directory should look like when you edit price.php.

Conclusion

After you have learned what is WooCommerce and how to use it, you’re ready to create WooCommerce Themes.

Continue to develop your WordPress and WooCommerce Themes knowledge with us with more posts like this one!

Have fun!