An Introduction to Theming WooCommerce for WordPress

WooCommerce is a popular eCommerce platform for WordPress that is being rapidly developed by WooThemes. In this article, I'm going to guide you through the fundamentals of theming for WooCommerce.
This article makes a few assumptions about your development environment:

1. You have WordPress and WooCommerce installed.
2. You are familiar with creating WordPress themes and using HTML and CSS.
3. You have used the Chrome Developer Tools or similar web development tools such as Firebug.

Customising the WooCommerce CSS

Out-of-the-box, WooCommerce comes with some built in CSS that aims to make it compatible with as many themes as possible. The default CSS is a great starting point but it is unlikely that it is going to perfectly match your theme's style right after installation.
As such, there are two ways of to edit the CSS for a WooCommerce theme:

1. You can use the default styles as a base and override them.
2. You may opt to disable the default styles and start from scratch.

WooCommerce adds a body class of "woocommerce" to all of its pages

Overriding Default Styles

Overriding the default styles is the quickest way to get started and will probably suit most people.
You could copy the whole of the default WooCommerce CSS file (located in wp-content\plugins\woocommerce\assets\css\woocommerce.css or woocommerce.less), remove anything you don’t need, and change anything you need; however, this can be time consuming, and may result in a lot of repeated CSS.
To that end, I normally use the following approach:

1. I navigate through the site finding the styles that I need to change.
2. After that, I use the Chrome Developer Tools (or a similar tool) to identify the classes, and even make the changes in the browser to make sure I understand how it's going to look. This is usually done by right-clicking on the page and choosing “inspect element” from the drop-down list.
3. Next, I copy the CSS from Chrome Developer Tools in to my theme's CSS file.
4. I review the CSS in Chrome Developer Tools as it may strike-through or grey-out any vendor prefixed styles for other browsers. It's important to change these values in order to keep your CSS consistent across the various browsers your visitors may be using.
5. Finally, I remove any values that I did not change in the copied CSS. For example, if I changed the width of something, but I did not the height, then I do not need to include the height in my custom CSS file.

Personally, I find this approach works best in most cases and really decreases development time.

In Google Chrome, you can right click on an element within the Developer Tools window to toggle the different states (hover, active etc.). This allows you to view all the states without searching through the original CSS file.

Disabling the Default Stylesheet and Starting From Scratch

The default stylesheet can be disabled by adding a small snippet of code to your themes functions.php:

1	define('WOOCOMMERCE_USE_CSS', false);

The quickest way to get all of the WooCommerce classes is to copy the original WooCommerce CSS file in to your own and remove anything that you do not require.

Declaring WooCommerce Support in Your Theme

This is particularly important if you are selling themes or releasing them to the public.
Without specifically declaring WooCommerce support within your theme, users will be shown an error message upon installation of WooCommerce and it will stay there until it is dismissed.
Fortunately, this can all be solved with a small snippet of code inserted in to your themes functions.php file:

1	add_theme_support( 'woocommerce' );

Diving in a Bit Deeper: Editing Templates

Editing the CSS within WooCommerce will get you quite a long way, but what about if you really want to customize the layout of pages? Luckily, there’s a nice way to do this.
The WooCommerce plugin comes with a number of front-end HTML templates as well as email templates. Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme:

1. In your theme directory, make a new folder called “woocommerce.”
2. Navigate to the WooCommerce plugin directory and open the "templates" folder. The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses.  Fortunately, the template file structure and naming in WooCommerce is easy to follow.
3. In your newly created "woocommerce" folder, copy the template file that you want to edit. Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory.
4. Edit the file from within your “woocommerce” folder and save the changes.

A Practical Example

Let's say that we want to change some of the HTML within the “My Orders” screen of WooCommerce.
The first thing we need to do is locate the correct template. In this case, the “My Orders” section is under “My Account” in WooCommerce. The directory structure looks like the following:
/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php
Next, make a folder within your theme called “woocommerce” and within that folder make a second folder called “myaccount.” After that, copy the my-orders.php file into that directory.
You should be left with the following:
/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php
Any changes made to this file will now override the original.

Advertisement

The WooCommerce Loop

If you have created or edited WordPress themes before, then you should be familiar with The Loop. WooCommerce has its own loop you can use which allows you to customize WooCommerce pages. For example, you may want to do this when you would like a load a different sidebar for your WooCommerce pages.
This is the most basic integration and by creating a custom WooCommerce template this will be applied to every WooCommerce page including products, categories and archives. If you do not want your WooCommerce template to look different from your standard template, then you do not have to create a custom WooCommerce template.
Creating the template is a straight-forward process:

• Duplicate your theme's page.php file and rename it woocommerce.php.
• Find the WordPress loop within your woocommerce.php file. It will look something like:

1 2 3 4

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_title(); ? <?php the_content(); ?> <?php endwhile; endif; ?>

• Replace your loop with the WooCommerce loop:  <?php woocommerce_content(); ?>
• Now, make any further changes you wish to make such as swapping in a different sidebar or changing the layout.

Let's Wrap It Up

You now know the fundamentals for integrating the WooCommerce eCommerce platform in to your WordPress themes.
The skills covered in this article will have you covered for most situations in WooCommerce. If you need a more advanced or flexible theme integration then the next step is to explore the various hooks, filters and conditional statements available for use with WooCommerce.
Useful Links: WooCommerce Plugins from CodeCanyon.