When it comes to WooCommerce, a good web design is extremely important: Visitors decide whether to stay in your online shop or bounce from it right away. It also strongly influences whether they actually complete the purchase. What do you need to bear in mind when choosing your WooCommerce themes? And what are the most important themes? Michael from RAIDBOXES shares his expertise.
A theme for WordPress or WooCommerce is kind of a design template. It determines what your website looks like. It is not so easy to choose the right theme for your online shop. Or as an agency to advise your clients on a specific template. This article guides you step by step through the selection.
There are basically two possibilities when using themes:
- You let others develop a completely independent theme and design for you.
- You buy a ready-made theme and adapt it to your needs. For example by adapting the colours to the appearance of your brand, changing the logo and background graphics, etc.
The first option makes your shop distinctive - but you also need very good web designers or a suitable agency. The cost of this can be in the mid-five-figure range if you focus on quality. On the WooCommerceother hand, there are high-quality templates that are flexible enough. And which you can use especially for the start of your online shop. More on this later.
Often you only realize after a relaunch that the new theme was not such a good choice after all. The design cannot be adapted as desired? Important updates are missing, so that parts of the webshop no longer work? And then the support is missing a lot to be helpful at all. If your portal's sales depends on it, then this can get really annoying.
All this makes it more important to test your theme well beforehand. And it is absolutely necessary to test for your own test system. You can only trust the manufacturer's specifications and demo sites to a limited extent: In combination with your plugins for WordPress and WooCommerce, problems often arise that were not visible before.
There are countless plugins for WooCommerce of all kinds of purposes. It is difficult to estimate the quality. Our contribution Plugins for WooCommerce introduces you to the tools you need for common shop projects.
Here are the most important tips for finding a suitable provider or theme:
Make sure that your theme for WooCommerce is optimized. Only these themes ensure that shop-specific elements are correctly displayed. For example, the product overview, the additional information, the shopping cart or the purchasing process or checkout. Templates that are specially designed for WooCommerce. Also pay attention to compatibility with new versions of the shop software because WooCommerce changes its processes here from time to time. You'd have to do that with a pure WordPress theme every time.
Ideally, you should choose a specialised WooCommerce provider. So that you will usually incorporate critical changes into his products faster. He also knows more about typical extensions for WooCommerce if these cause problems in combination with the design. I'm going to introduce you to a few more special theme the shop system.
By now it is an absolute must that yours theme is optimized for different mobile devices. Only then will it look equally good on the desktop, tablet and smartphone. And only then will important elements like the shop navigation or the shopping cart work.
In many online shops, 80 percent of the calls are made via mobile devices. Using Google Analytics and similar tools, you can see how high this percentage is for your own portal. If your theme was not developed properly, you will annoy your target group and lose up to 80 percent of them. In addition, Google mercilessly punishes those portals that sloppy with mobile optimization.
Every theme developer now identifies its products as mobile-optimized or responsive. But there are big differences in quality - how individually are the individual devices actually supported? At ami.responsivedesign.is you will find an online tool that allows you to roughly check how a web page is played on different formats:
However, this only is a first clue for your research. It does not replace the actual live review by you, on as many different devices and browsers as possible (Chrome, Firefox, Edge, Safari). You should also check the function of buttons, menus, checkboxes, forms, sliders etc. manually.
You will need a separate test system to check your themes and plugins. Or a so-called staging environment for WordPress. See our guide to the topic Test environment and backups.
Also for WooCommerce there are themes which are freely available. If you run an online shop, you do this professionally. Therefore, you should also decide for a professional theme. Especially if you don't know the technical details yourself, so you can correct the source code if necessary.
The annual license costs are manageable, usually less than 100 Euro. What a typical WooCommerce shop costs in total, I'll tell you in the following article advantages of WooCommerce. Here are the reasons for a Pro theme
- They are usually maintained more often. This is especially important for updates from WordPress and WooCommerce.
- With free templates, it can quickly happen that the developers can no longer develop them further. Then you have to do this yourself or change your theme. This risk is lower with paid solutions.
- With good pro-Themes you get comprehensive support. Make sure that this support is provided in your native language and during your business hours.
- A very good quality of the source code should be a matter of theme course for a professional. This ensures security and a good performance. Unfortunately this is not always the case. Freelancers or agencies in the WordPress environment can judge the quality for you.
Overall, professional solutions minimize your entrepreneurial risk. Nevertheless, check the providers of pro themes, not all work equally well. Ask other shop owners which developers they have had good experiences with.
Documentation is the heart of every theme. Read it carefully before you start. It not only tells you whether the product is easy to set up and adapt. The quality of the manual also gives information about the supplier himself.
Popular templates - which are bought or downloaded very often - have one advantage: They are more intensively supported by their developers. Also in forums and in the community you are more likely to get answers to your questions about a more familiar theme. If you leave the technology to an agency, they can turn into a theme with which the agency's developers have experience. Even if the developers can no longer or no longer want to continue to look after the theme: There is a higher chance that others take over the support when using a popular theme.
On the other hand, there are designs that you will encounter in every second WooCommerce shop. Your shop should be based on the layout and structural appearance of very well known and large webshops. Then your customers will find their way around as quickly as possible. This is also called the Amazon Effect.
And yet it is individual design elements that are unmistakable. Your visitors will hopefully know immediately on the second call: "I've been here before" - an important prerequisite for generating regular customers. A memorable layout that has such unique selling points makes your online marketing much more efficient.
In this context, take a look at your main competitors. What do their online shops look like? Which theme do they use? Easily confused websites would be fatal.
At the latest when your shop grows, you should consider having your own Themedesign developed. If this is well done, it will fit your brand particularly well. Especially regarding layout, colouring, typography, product world and visual language. This can drive the conversion (the proportion of sales generated by page visits) up significantly.
My recommendation: Hire professionals for this. This is the more costly but more sustainable strategy. With good support, it is even more cost-effective in the long term.
Most of the functions of your online shop will be done by WooCommerce yourself. This theme ensures the right appearance. Nevertheless, some template developers rely on additional components. For example, their products contain:
- Drag & Drop PageBuilder, with which you can change the appearance of the shop with a click of the mouse. But be careful: Such PageBuilders also have some disadvantages.
- Integrated sliders for product presentation or so-called mega-menus, which contain icons, pictures and other elements. Or more extensive building blocks for customer reviews than WooCommerce are available in the standard system.
- Wish lists, with which your visitors can remember individual products and save them for later shopping.
- Own widgets to fill the sidebar, the header or the footer with content according to your ideas. Advanced filter or search functions to make it easier for your customers to select and sort products.
- A user-friendly but at the same time legally compliant design of the "cash register" and "customer account" areas.
- A mini shopping cart that is displayed on all sites of them. For example in the menu of your online shop. Also pay attention to the legal requirements of your country.
I'll tell you more about legal regulations in Europe in my blog post Make WooCommerce Legally Compliant. Because WooCommercethe standard is geared towards the US market.
You should not use a theme that contains countless functions that you do not need. Because some of these little helpers are at the expense of the performance of your shop. Page builders are particularly controversial here: they look fancy and allow flexibility. However, if you do not develop properly, they will also slow down your system. If you want to learn more about page builder for WooCommerce, then read the following articles:
- Page Builder: Curse or Blessing For The World Of WordPress? (Pascal Prohl)
- WooCommerce with Pagebuilder (Harald Frey)
Ideally, your theme so-called child theme. With this, on the basis of one and the same theme realize several sub-designs. This is especially important if you want to run several online shops with slightly different designs without having to create a new theme to use.
For agencies: Even if you need individual templates based on an existing themes you should pay attention to this feature. A well structured CSS is also very helpful in this context. A guide to WordPress Child themes you will find in the blog from Marco Linke.
Also, make sure that your theme is optimized for the "new" editor Gutenberg from WordPress this will also play an increasingly important role for WooCommerce. If the theme offers his own Gutenberg blocks, you should be careful. The content could be lost when switching to another theme no longer work.
You are not using the Gutenberg editor yet? Then take a look at our E-Book Special on Gutenberg on. It shows you in six steps how to use the editor for your business and your shop.
If you decide on a paid Themeone, you should keep an eye on the costs. As already mentioned, these are usually not very high. Nevertheless, check the following points:
- How long does the license for the Theme? Is it unlimited, even if you develop the files yourself, or does it have to be renewed after a certain period of time?
- Are you theme even allowed to extend that yourself? Normally this is WordPress guaranteed in the open source environment of. Nevertheless, clarify the question.
- For how long do you receive updates and support? Are certain support and response times guaranteed?
- Is the license valid for one domain only or for several? This is important if you need Child-Themes for more shops.
- If you change your domain or project, does the license remain valid?
Just as important: Are background images etc. of the Themesobject included in the scope? May they be used freely? Who has the rights for them? Do you receive the files in reusable formats, for example for Photoshop? Here you should definitely clarify the image rights in order to Risk of a warning to be minimized.
You work in an agency or as a freelancer? Then you should pay special attention to how far you are allowed to use this theme. And who in the end has the license and to what extent. Because you are dependent on handing over the project to your customers as smoothly as possible after development. See our tips for Efficiency and operation by WordPress and WooCommerce.
There are several themes and providers for WooCommerce that are well known in the WordPress scene. So for these you can easily find support from freelancers or an agency. However, note the disadvantages described above, which such widespread templates bring with them. Here now a few "flagships":
Flatsome is one of the best known themes for WooCommerce. According to the developers, it is the most sold for WordPress shops ever. Flatsome is also very popular in German-speaking countries, although support is provided in English.
In the most important WooCommerce forums simple questions about this theme are often resolved. For larger tasks you will still need external developers.
Flatsome is not entirely uncontroversial in the community. Some praise it, others reject it as oversized. On the one site hand there is the Pagebuilder from Flatsome very flexible. It supplies countless elements from the factory without you needing any additional plugins ones. For example various content levels, sliders, a wish list, live search, boxes, product filters etc.
This makes your system on the other site hand quickly confusing. If you enter your content in special areas of the pagebuilder, which only this one provides, it makes it theme much more difficult to switch to another one. Future security is not guaranteed.
With a homepage construction kit like Flatsome you click together a design that differs significantly from the original appearance - without much programming knowledge. This compensates for the widespread use of the themes again. However, this process can quickly make your shop look inconsistent and "thrown together". It is therefore always worthwhile to hire freelancers or an agency that is familiar with web design.
WooCommerce also has its own official Theme: Storefront. For the storefront package, similar notes apply as for "Flatsome". It is a comprehensive tool, but it needs to be set up in a well thought-out way. A first shop with storefront is quickly created. But the devil is in the details. If you want to use all the functions of the theme and its add-ons, you have to be well versed.
Especially since the template requires a proper configuration and suitable image material. Because the basic version looks quite simple and manageable - you could also say boring:
The big advantage of the bundle: It comes from the developers of WooCommerce themselves. Therefore the development team usually pays attention to a good compatibility. When a new version of the shop software is released, an update from Storefront usually follows quickly.
Neither Storefront nor Flatsome are inherently suitable for use in the German-speaking market. You should also check this for other EU countries. The information in our article legal certainty for WooCommerce mentioned tools work together with the most important themes. Nevertheless, clarify this in advance, otherwise it will quickly become expensive.
There are numerous extensions to Storefront, from WooCommerce but also from third parties. For example for the following purposes:
- A component called "Powerpack", which you need to graphically customize different areas of the online shop with a mouse click
- Internal product advertising space and landing pages
- Mega menus
- Extended customer ratings and price tables
- Connection to social networks
Many of these are subject to a fee. Even those with manageable services. Here you should keep an eye on your expenses. They add up quickly to a tidy sum per package. Because then the running costs are no longer necessarily much cheaper than with a self-developed theme.
Atomion is a smaller and still quite new theme. We have included it because it is one of the few WooCommerce templates for the market in Germany, Austria and Switzerland (D/A/CH). This means: Support is provided in German language and at German support hours. The design is clear and structured so that the focus is on your products:
Atomion is also delevoped by MarketPress, the developer of German Market and B2B Market. If you are looking for a complete package that takes into account the restrictive legal requirements in the mentioned countries, it is worth taking a look at the theme. Because according to the developers all three components are coordinated.
This WooCommerceThemeoffers among other things:
- Support of the WordPress editor Gutenberg
- A customizer to adapt the design in various places
- Integrated systems for customer reviews and a wish list
- A mini shopping basket, which should also comply with the legislation
- Optional preloader function (your shop will not be displayed until it is fully loaded)
- An optimized search function for WooCommerce
A fully designed blog area is also included - in addition to the webshop. This is something you should always Themeslook out for.
The promotion of your products through appropriate content (called content marketing in the technical language) is becoming more and more important. Many new and smaller online shops sell to a large extent from their blog, because the shop brand is not yet sufficiently known by Google and potential visitors.
Astra is not just a shopping theme. You can also use it to realize other projects. Nevertheless, it is used in the environment of WooCommerce quite often. Some of them present the creators on their portal.
The developers of Astra offer a free trial version on. You should definitely try this one: Some shopkeepers get along with this theme, others don't think it's right for their purposes. Even the prefabricated design templates do not meet everyone's taste.
In particular, test additional Plugins on legal certaintyif you use these. Some do Themes not support any that are not 100 percent WooCommerce designed for.
WooCommerce Themes at TemplateMonster
Also at our partner TemplateMonster you will find numerous templates for WooCommerce. For example the multifunctional WooCommerce Theme Woostroid. It has exciting features like a "LookBook". This allows your buyers to navigate through different products, which are shown in a graphic:
Woostroid contains Elementor, a WordPress page builder that allows you to create different layouts without programming knowledge. It includes 25 content modules and a flexible layout grid to customize the look of the existing sites ones. Woostroid was not primarily designed for the European market, so you should also try it before you buy.
- Does the design match my products, especially the product images?
- Is that theme fast enough? See our notes on performance optimization.
- Is your webshop easy to use? Are central elements easy to understand?
- Does the shopping cart work on all systems (Chrome, Firefox, Edge, Safari, Android)?
- Is the Mobile optimization consistently available, for all important end devices?
Ideally, you should let important customers or friends try out your new shop design. Only in this way will you discover central weaknesses that are detrimental to your conversion.
Get more WooCommerce tips in our 70-page e-book WooCommerce for professionals. This book is aimed at freelancers, agencies, WordPress professionals as well as beginners.
Do you have questions about WooCommerce? Please use the comment option below. Would you like to hear about the latest news and tips from the world of WooCommerce? Then follow us on Twitter, Facebook , or subscribe to our newsletter.