Working with WooCommerce Themes

 In this article by Robbert Ravensbergen author of the book Building E-Commerce Solutions with WooCommerce - Second Edition explains how to set up our online store and add different types of products. In this article, we'll cover the following topics:

  • Using the available widgets and shortcodes
  • Making or buying a theme

(For more resources related to this topic, see here.)

Using the available widgets and shortcodes

When you installed WooCommerce, you also received a number of possibilities that you can use to show products to your visitors. Of course, there are the default available shop, category, and product pages, but, sometimes, you need more than that. Let's look at the other options that WooCommerce offers by default.

WooCommerce offers the following widgets that you can reach from the theme customizer or via Appearance | Widgets:

  • WooCommerce Layered Nav Filters
  • WooCommerce Price filter
  • WooCommerce Product Categories
  • WooCommerce Products
  • WooCommerce Product Search
  • WooCommerce Product Tags
  • WooCommerce Recently Viewed
  • WooCommerce Recent Review
  • WooCommerce Top Rated Products

The screenshot is as follows:

Using these widgets is easy, and they work just like any other WordPress widget. Using a couple of these in your sidebar gives your visitors the flexibility they need to find their way in your store. In the following example, you can see that we activated the following widgets: WooCommerce Product Search, WooCommerce Products, and WooCommerce Product Categories, which is shown in the following screenshot:

Note that the sidebar is on the right in this example. Generally, it makes more sense in an online store to have such a sidebar on the left. This is something that you can just set in the Storefront theme.

Making or buying a theme

The look and feel of your store is completely controlled by your WordPress theme. We already noticed that even a standard theme like Storefront delivers good results. It's just better to use a theme that has been created with WooCommerce in mind. If you use a standard WordPress theme such as Twenty Fifteen or Twenty Sixteen, WooCommerce will still work, but layout issues might occur.

We have two possibilities when choosing a design for our store:

  • Design and develop a theme from scratch or have someone do this for us
  • Use a WooCommerce theme that is available on the market

To start with the first option, creating a theme ourselves is not something that we could do overnight. It requires extensive knowledge of web design, WordPress, WooCommerce, PHP, HTML, and CSS, just to name a few. Maybe, if we wanted to have a unique design that no other shop is using, this could still be a good choice. It just requires more time and a large budget to do so. Creating your own WordPress or WooCommerce theme is a learning experience if you have never done it before.

The alternative is using a standard theme. These themes are optimized for WooCommerce and available out of the box. Using a standard theme, you can start right away. Some of them are even free, for instance, the good Storefront theme. We'll often find that we need a commercial theme. Commercial or premium themes can be found in price ranges from $20 to $200, where the majority of the themes will be offered below $100. If we had a small budget, this would definitely be the way to go as there are hundreds of themes to choose from. Remember that it's always possible to make adjustments on these themes so that the theme of your choice fits your needs better.

Finding and selecting WooCommerce themes

If you decide to use a standard theme, you'll face a new challenge: which theme will fit your needs? There are free themes available on the market, but most WooCommerce themes are commercial themes that you'll have to pay for. Often, they are referred to as Premium themes. These themes are supported by the developer and deliver lots of functions in most cases. However, this is not always a good thing. Functionality should be provided by plugins and not within the theme itself. Besides that, having too many functions will just slow down your website. As a beginner, this is sometimes difficult to judge. Just pick what you really need and do not go for the theme that offers the most functions. Look for themes that make it easy to customize the layout, colors, and fonts. There are a number of resources available online to look for WooCommerce-compatible themes:

  • The WooThemes website (http://www.woothemes.com) from the developers of WooCommerce. In fact, WooThemes exists much longer than their WooCommerce product, which is relatively young. Look at the demos to check how category and product pages will look like. The good thing of a theme created by WooThemes is that it will be an absolutely quality theme and compatible with WooCommerce. Themes found on WooThemes are not the cheapest ones. Pricing starts at around $80. Pay attention to the child themes. They have a low price, but also require the theme that it was built on. The following image shows a screenshot of Outlet, one of the available themes at WooThemes.com:
  • ThemeForest at http://themeforest.net/category/wordpress/ecommerce/woocommerce. ThemeForest is a marketplace, where lots of developers offer themes for WordPress and other solutions. There's a large range of WooCommerce-enabled themes available. Note that the quality may differ. Look carefully at the demos, comments of the other readers, and the last time that it was updated. Reasonably priced themes are around $60.
    The following image shows the Integrity theme demo created using the X-theme, one of the many versatile and flexible WooCommerce themes at ThemeForest.com:
  • Cheaper themes can be found elsewhere on the Internet at Elegantthemes (http://www.elegantthemes.com/gallery/) or Mojo Themes (http://www.mojo-themes.com/categories/wordpress/ecommerce-wordpress/woocommerce-themes/).

Sometimes, you can find free themes as well. The best resources are WooThemes and the WordPress.org website: http://wordpress.org/themes/. Search for WooCommerce if you're searching on WordPress.org. All themes can be used, but using a theme built for WooCommerce often gives better results out of the box. Be careful when building your business on a free theme. Although it seems tempting if you're on a low budget, free themes are often not updated or supported. If there's any free theme that we can really recommend, then it would be the Storefront theme. It is well written and a good starting point if you want to learn WooCommerce theme development yourself. It is supported by WooThemes as well, which is an important asset for a free theme.

I also wrote a roundup of free WooCommerce themes on my blog. If you need to limit yourself to free themes, you should check it out. You can find the blog here: http://www.joomblocks.com/best-free-woocommerce-themes-2015.

Things you should pay attention to when buying a theme

If you're not yet very familiar with working with different WordPress themes, then the following guidelines may be helpful to come to a good choice:

  • Browser compatibility: For users, this isn't always clear, but often older browsers like Microsoft Internet Explorer 8 are no longer supported. This means that a visitor using such a browser will see a malfunctioning website. Depending on your audience, this is or isn't a problem. Just pay attention to it and make sure that you understand which browsers and versions the theme of your choice will work on.
  • Smartphone/Tablet compatibility: Nowadays, when building a website, you have to consider how your site will look on mobile devices. Meet this requirement by looking for a Responsive WooCommerce theme. A website built with a responsive theme will look good on all devices, independent of their maximum screen resolution. Themes that are also Retina ready will look good on high resolution screens such as the iPad 3. See the following example of a responsive theme and how the look and feel will change if the website is visited using a mobile phone (on the right-hand side):

    Theme developers almost always offer a demo site where you can check how the theme looks like. Don't forget to open this demo page with a tablet and mobile phone as well to get an idea of the layout on these devices.

  • Is the theme compatible with the latest version of WooCommerce? Check the current version of the WooCommerce plugin and if the theme developer guarantees that it will work. When buying a theme from WooThemes, there should be no incompatibility issues.
  • When was the theme updated? Especially when buying from third-party developers, such as the ThemeForest marketplace, it's important to check whether the developer is keeping the theme up to date. Having an updated theme is important. An older theme might not be compatible anymore with the latest WordPress and WooCommerce versions.
  • How flexible is the theme from the functional point of view? For example, will you be able to change colors easily? Can you change the layout of the theme a bit without coding? Is there enough space in the header for your logo?
  • What other functions are being delivered? Do you really need all the functions that are being delivered in the theme? We often see themes with tons of functionality. Using such functions is handy, but your website might break if you switch to a different theme. For example, nowadays, we regularly see themes with built-in functions for Search Engine Optimization (SEO). If you switch themes in the future, you might even lose such data! Even if the theme offers functionality like this, it's better to take advantage of a separate SEO plugin. This will prevent the loss of data if you ever want to change to a different theme in the future.

There are a lot of things that we have to pay attention to when buying a WooCommerce theme. However, when creating a theme from scratch, we need to pay attention to some of these topics as well. In this case, we must have, or gather, the knowledge to be able to build it correctly.

Summary

There are lots of WooCommerce-compatible themes on the market. We've seen that working with a theme isn't difficult as long as you take the time to read the documentation and get to know your theme. The exact way of working may differ from theme to theme, especially for premium themes.

The Storefront theme gives us a good and solid base, and even without changing code, we can already reach a good-looking result.

Resources for Article:


Further resources on this subject:


You've been reading an excerpt of:

Building E-Commerce Solutions with WooCommerce - Second Edition

Explore Title
comments powered by Disqus