When it comes to WooCommerce, good web design is extremely important. Good design determines whether your visitors stay in your online shop or bounce from it right away. It also strongly influences whether they actually complete a 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. Choosing right theme for your online shop is no easy task. Neither is recommending a specific template to your customers as an agency. This article guides you step by step through the selection process.
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 colors to the appearance of your brand or changing the logo and background graphics.
The first option makes your shop distinctive - but for this you also need very good web designers or a suitable agency. The costs for this can go into the mid five-figure range, if you rely on quality. On the other hand, there are also high-quality templates in the WooCommerce environment that are flexible enough. And you can use them especially for the start of your online shop. More about that 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.
It is therefore all the more important to test a Theme well in advance. And by all means on your own test system. You can only trust the manufacturer's specifications and demosites to a limited extent: In combination with your Plugins for WordPress and WooCommerce , it is not uncommon for problems to arise that were not visible beforehand.
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 manufacturer now identifies its products as mobile-optimized or responsive. But there are big differences in quality - how individually are the individual end devices actually supported? At ami.responsivedesign.is you can find an online tool with which you can roughly check how a website is displayed 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.
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, they are usually less than 100 euros. I'll tell you what a typical WooCommerce shop costs in total in the article Advantages of WooCommerce. Here are the reasons that speak 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 will receive 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 course for a professional Theme . This ensures security and good performance. Unfortunately, this is not always the case. Freelancers or agencies in the WordPress environment can assess 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.
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 web shops. 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.
At the latest when your shop grows, you should consider having your own Theme and design developed. If this is done well, then it fits particularly well to your brand. Especially in terms of layout, color scheme, typography, product world and imagery. This can increase the conversion (the share of sales in the page visits) again significantly.
My recommendation: Hire professionals for this. This is the more costly but more sustainable strategy. With good support, it is even cheaper in the long run.
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 PageBuilders, with which you can change the appearance of the shop with a mouse click. 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 that allow your visitors to remember individual products and save them for later purchase.
- Custom widgets to populate the sidebar, header or footer with content according to your ideas. Advanced filter or search functions to make it easier for your customers to select and sort the products.
- A user-friendly but at the same time legally compliant design of the "checkout" and "customer account" area.
- A mini shopping cart that is displayed on all sites . For example, in the menu of your online shop. Here, too, pay attention to the legal requirements of your country.
I'll tell you more about legal regulations in Germany and Europe in the blog postWooCommerce . The standard version of WooCommerce is designed for 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 WordPress world? (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 want to distribute 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 tutorial on WordPress Child Themes can be found on Marco Linke's blog.
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 its own Gutenberg blocks, you should be careful. The content might not work anymore when switching to another theme .
If you decide to pay for Theme , you should keep an eye on the costs. These are - as already mentioned - usually not very high. Nevertheless, check the following points:
- How long is the license for the Theme? Is it valid indefinitely, 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 will you receive updates and support? Are certain support and response times guaranteed?
- Is the license only valid for one domain 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?
Equally important: Are background images etc. of the Themes included in the scope? May these be used freely? Who has the rights to them? Do you receive the files in reusable formats, for example for Photoshop? Here you should definitely clarify the image rights to minimize the risk of a warning.
You work in an agency or as a freelancer? Then you should pay particular attention to the extent to which you are allowed to use Theme . And who has the license at the end and to what extent. After all, you are dependent on handing over the project to your customers as smoothly as possible after development. See our tips on efficiency and operation of 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 most popular Themes for WooCommerce. According to the developers, it is the best-selling 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.
In the community, Flatsome is not entirely without controversy. Some praise it, others reject it as oversized. On the one hand site the page builder of Flatsome is very flexible. It delivers countless elements out of the box, without you needing additional Plugins . For example, various content layers, 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. Similar advice as for "Flatsome" applies to the Storefront package. It's a comprehensive tool, but it wants to be set up thoughtfully. A first shop with Storefront is quickly created. But the devil is in the details. If you want to take advantage of all the functions of Themes and its add-ons, you have to know your way around.
Especially since the template needs a proper configuration and suitable visuals. Because the basic version looks pretty simple and straightforward - 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.
By default, neither Storefront nor Flatsome are suitable for use in the German-speaking market. You should also check this for other EU countries. However, the tools mentioned in our article Legal Certainty for WooCommerce 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: The support is consistently German-speaking and at German support times. 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.
The WooCommerce Theme offers, among other things:
- Support of the WordPress editor Gutenberg
- A customizer to adjust the design in various places
- Integrated systems for customer ratings and a wish list
- A mini-shopping cart, which should also comply with the legislation
- Optional preloader function (your shop will only be displayed when it is completely loaded)
- An optimized search function for WooCommerce
Furthermore, a fully designed blog area is included - in addition to the webshop. You should always pay attention to this with all Themes .
Astra is not a pure shoppingTheme. You can also implement other projects with it. Nevertheless, it is used quite often in the environment of WooCommerce . The creators present some of them on their portal.
The developers of Astra offer a free trial version. You should definitely try it out: Some shop owners get along well with Theme , others find it not suitable for their purposes. Also, the prefabricated design templates do not meet every taste.
Especially test additional Plugins for legal security, if you use it. Some do not support Themes, which is not 100% designed for WooCommerce .
WooCommerce Themes at TemplateMonster
Also at our partner TemplateMonster you can 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 that are displayed in a graphic:
Woostroid contains Elementor , a WordPress page builder that allows you to create various layouts without any programming knowledge. It includes 25 content modules and a flexible layout grid to flexibly adapt the look of the existing sites . Woostroid was not primarily designed for the German-speaking market, so you should also try it out in advance.
- Does the design match my products, especially the product images?
- Is the theme fast enough? See our tips on performance optimization. But also: Is your WordPress hosting fast enough? Special plans for WooCommerce will help you here.
- 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 mobile optimization in place across the board, for all major devices?
Ideally, you should have your new shop design tested by important customers or friends. This is the only way to discover key weaknesses that are detrimental to your conversion.
You can find more tips on WooCommerce in our 70+ sites strong e-book WooCommerce for professionals. It is aimed at freelancers, agencies, WP professionals, but also at beginners.