Skip to main content

Home / Insights / The Ultimate Guide to WooCommerce Website Design in 2022

The Ultimate Guide to WooCommerce Website Design in 2022

17th May 2022

We’ve created a comprehensive guide on all the components required to achieve excellent WooCommerce design and development in 2022. Using our 25 years of ecommerce industry knowledge, we’ve explored each of these components, providing a rundown of things to consider. Furthermore, we’ve drawn conclusions and provided recommendations from our own experience, as well as the general consensus provided by other users. The areas we’ve decided to explore in more detail include:

We hope that this guide will provide helpful insight into WooCommerce development and help you navigate this busy, exciting, ever-expanding market. 

What are you waiting for? Start planning your WooCommerce website today!

Selecting The Right Ecommerce Platform

When creating an ecommerce store, the first consideration is identifying the best platform for the website. Before choosing WooCommerce, you may want to consider the other platforms available to ensure you make the right selection.

Magento

Magento is one of the biggest ecommerce platforms in the world, and it offers a variety of features, including easy cross-selling, payment gateway integrations, and extensions for customization.

However, Magento is not for beginners. You will require a specialist developer to build and maintain your websites, which means Magento may not be viable for smaller businesses.

WooCommerce

WooCommerce is an alternative ecommerce platform that offers flexibility and ease of management for smaller businesses that don’t have access to a developer. In WooCommerce, you can configure your store, list products, bulk email, manage multiple inventories and monitor analytics as a beginner.

However, many features in WooCommerce are available as additional plugins, which can become expensive and slow your site down. It’s essential to be mindful of how many plugins you install.

Shopify

Shopify is another leader when it comes to ecommerce platforms, with its user-friendly design making it customizable and straightforward. The simple interface allows you to generate promo codes, manage products, create blogs, integrate social accounts, and email customers.

However, the features and customization you can do with Shopify are limited. Without a developer, you will need to use recent themes to design your website, which will limit how your site looks and feels.

Read our blog for more information on ecommerce platforms and how to select the best one for your business.

WooCommerce Themes

WooCommerce out of the box provides the bare bones of a development project without any visual assets. Consider this to be similar to the concrete foundations of a house. While it doesn’t provide anything aesthetically pleasing, it gives the base for you to build upon. 

A WooCommerce theme functions as the visual framework of a website. So, in our example, this may be the look and feel of the house you create. You could opt for a 1920s townhouse, Spanish villa, or log cabin – whatever you fancy! A theme gives you the ability to select the aesthetic shell, helping to stylize the website and knit the pages together. It can also help to keep the website in line with brand guidelines and functioning as an extension of pre-existing assets.

There is another layer in this process as further personalization to your project can be made through page builders and editors. These function as the contents of your house and the elements that determine how the space is used. Editors and themes are easy to confuse as they can have similar components, and both contribute to the aesthetic outcome of the project. 

Some providers have developed their software to function as both a theme and page editor. This can be beneficial as it ensures the compatibility of the two elements, something you need to confirm if you decide to select two separate providers. We will explore this in more detail in the Page Builders and Editors section below. 

Things to consider when selecting your theme:

  • Community Support: The unofficial support available to assist with queries and problem solving when applying and managing the software. This can bolster the value proposition for any WooCommerce software as you can share ideas and engage with people who have similar interests. This can help you to develop your business.   
  • Popularity: Familiarity within the Woo community or straightforward code will ensure that many developers can work on the website without complications or limitations. This may help reduce the duration of tasks linked to this area of code. 
  • Quality of Code (Bug-free): Clean code will limit the number of issues experienced when using the theme. This makes it easier for admins to manage and prevent potential complications for end users. It also limits disruption that could have negative implications or a knock-on effect capable of impacting revenue. 
  • Customer Support: The official support is available to handle queries and address bugs when required. As well as having staff members on hand to tackle any inquiries, some providers may also have helpful resources such as documentation and tutorials available. 
  • Simple for Client Use: The ease of use amongst those with limited technical ability, ensuring a smooth rollout to all clients and customers.
  • Plugins and Extensions: Features and software that can be added to the website to improve the functionality.
  • Load Times: The impact of the software on the site and whether it helps or hinders the overall performance. 

We recommend the following WooCommerce themes: 

Click here to read our full article about WooCommerce themes and our chosen providers. 

WooCommerce Page Builders and Editors

As discussed above, page builders and editors allow us to construct our web pages’ contents, similar to how the contents of a house (such as kitchen cabinets or a bathroom suite) shape each space’s purpose. 

Creating beautiful pages is made easy using WooCommerce page builders and editors. This software provides users with various design options, frequently seen with valuable tools such as live editors and drag-and-drop functionality. Aiding the user as they can see their design while they work, removing the typical guesswork usually required during a WooCommerce project. Many of the platforms we looked at also removed the need for any alterations to the code, meaning that users without any developer knowledge can make significant changes to their website. 

Video by Elementor

Things to consider when selecting your page builder and editor:

  • Understanding Your Requirements: Acknowledging the essential features required to achieve the project’s outcome. Categorizing functionality as non-negotiable, important, or nonessential to provide a shopping list of necessary components from your page editor.
  • Features, Widgets, and Customizable Elements: The range of functional and visual extras used to construct appealing webpages. These may include headers, toggles, social icons, quote blocks, etc.
  • Ease of Use: Intuitive software that requires minimal coding is best suited to meet the requirements of a broader audience. 
  • Theme compatibility: Themes and editors work hand-in-hand, so it’s vital to select compatible software to ensure the best results.
  • Mobile, Tablet, and Browser Responsive: Suitable for all screen sizes, so it’s accessible on all devices. Essential for securing a broader audience.
  • SEO Friendly: Technology that supports SEO performance, strengthening the ranking in online search results and helping to obtain organic traffic.
  • Community: A support network of passionate, engaged individuals on hand to offer additional assistance and answer queries if needed. 

Based on these factors, we recommend the following providers.

ProviderElementorWPBakeryBeaverBuilderOxygen BuilderDivi BuilderGutenberg
PriceAnnual: $99Annual: $56 – 299Annual: $99 – £399Lifetime: $129 – $349Annual: $89
Lifetime: $249
Free
Rating 9/108/108/108/109/106/10

Each offers a unique formula for website creation, so it’s worth conducting market research to identify the software best suited to your organization. Click here to read more about these WooCommerce editors and the benefits highlighted in our analysis.

Essential Ecommerce Plugins

There are thousands of WooCommerce plugins available. However, installing a significant number can easily overwhelm the system, resulting in slow load times and poor performance. Due to this, it’s recommended that you select a few chosen plugins that are beneficial to the function and usability of your ecommerce platform. Two we highly recommend include shipping and product filtering.

Shipping Plugins

While shipping may seem like a slight afterthought when conceptualizing your ecommerce platform, it is an essential element capable of altering a customer’s decision to purchase. Have you ever gotten to the checkout and been put off by hefty shipping fees? Research shows it’s more than likely as over 61% of shopping carts are abandoned due to additional costs such as shipping, taxes, and fees. Get this element right with the help of a shipping plugin capable of providing transparency, automating the shipping process, and helping to ensure that no customers are lost due to unexpected expenses.

Benefits of a shipping plugin:

  • Streamlining Internal Processes: Implementing an effective shipping plugin allows businesses to funnel orders through a modern system, reducing admin time, increasing efficiency, and saving money.
  • Increasing Conversions: Transparency on shipping costs, taxes, and fees helps to remove any nasty surprises at the checkout, which can easily deter shoppers. Simple changes and flexible pricing can support sales growth.
  • Establishing and Meeting Customer Expectations: Providing the correct information helps to meet customer expectations and supports the growth of a loyal customer base. Poor communication and pricing in regard to shipping can easily deter customers. 

There are a few elements to keep in mind when selecting the correct shipping plugin for your organization:

  • Ease of Use: Select a straightforward plugin to ensure it aids your business, integrating smoothly with your processes, removing potential complications, and increasing efficiency.
  • Flexibility and Range of Services: Offering various shipping options and pricing, enabling customers to select their preferred postage method.
  • Pricing framework: A clean internal pricing structure that suits the product type and is easy to use, helping admins and customers alike. 
  • Scalability: Software that will continue to benefit the business as it expands and adapts. Ensuring long-term use and preventing the resource-heavy transfer process to a different plugin in the future.
  • Cost: Suitable pricing that’s affordable for the business. 
image displaying shipping functionality using conditional shipping rules
Image by WooCommerce: Conditional Shipping and Payments

Our research highlighted the various ways of calculating shipping, from a blanket approach to per-product pricing and the creation of rules. Finding a suitable shipping plugin is primarily down to identifying and implementing the best costing method for your organization. 

WooCommerce:
Conditional Shipping and Payments
WooCommerce:
Table Rate Shipping
WooCommerce:
Per Product Shipping
Shiptheory
FlexibilitySomewhat flexiblePotentially limitedVery flexible Very flexible
Customer roles  Wholesale and membership NoNoNo
Subscription service Yes No NoNo
Additional IntegrationsMany availableNoNoMany available
Scalability Potentially limitedGoodPotentially limitedPotentially limited
Pricing StructurePotentially complex GoodPotentially complex Potentially complex
User interface GoodExcellentGoodExcellent
Cost $79$99$79$0 – $365

Click here to learn more about the referenced shipping plugins and their pricing structure. 

Product Filter Plugins

Incorporating a filtering plugin onto your WooCommerce site can aid product discovery, improve navigation, and help your business achieve higher conversions. Some WooCommerce filtering plugins focus on speed, while others provide various filtering options and UI stylizations. 

There are many elements to consider when selecting your plugin, including:

  • Filtering Options for Product Attributes: Selecting robust software that offers a range of applicable filters, capable of suiting your product range and any additional ecommerce businesses if required. 
  • Easy Download and Implementation: Select a plugin that is easy to download and implement. The software is usually at a lower price point than other elements we’ve explored within this guide, meaning providers may offer limited support. It’s beneficial to pick a plugin that’s easy to integrate, set up, and manage, preventing complications and the expenditure of any unnecessary resources. 
  • Customer Journey: Boasting aesthetically pleasing and functional software is preferable for optimal UX and UI. Enhancing the customer journey and providing clean, seamless navigation through the website.
  • Load Speed: Ensure that your customers get results quickly and that the overall speed of your website is not impacted by the weight of additional plugins. 
  • Demo Options and Testing: If possible, use the opportunity to test the plugin to confirm it works well with your website. 
video displaying the functionality of Acsell Product Filters
Video by Acsell Product Filters

We identified six great WooCommerce product filter plugins available on the market. Acsell Product Filters is highly recommended, with in-browser fast filtering, capable of offering lightning-fast results, even on websites with over 10,000 products. The unique design means that it performs better with high traffic levels, great at supporting websites when needed most.

The features of Acsell include: 

  • The features of Acsell include: 
  • In-browser fast filtering
  • Drag and drop ordering
  • Created with advanced ajax
  • Easy set up with a config wizard
  • Category, mobile, and desktop specific filters
  • Optimized for mobile and desktop use
  • Anchors to page location when navigating away
  • Infinite scroll, lazy load, and show more product load features
  • Knowledge base and support

Click here to learn more about Acsell and other WooCommerce product filtering plugins available. 

Size Your Products Images for Maximum Quality

In today’s competitive market, you need to be able to sell your products with ease and without any obstacles. One of the best ways to do that is by making sure that they look as good as possible. If you have WooCommerce products on your site, there are a few things you should know about how to size them for maximum quality. Read this post for all of the information!

There are three important factors to consider when adding product images to your WooCommerce store:

  1. Product Image Dimension (Width and Height)
  2. Product Image File Format
  3. Product Image File Size (Smaller file size for faster page loading)

Each of them should be taken into consideration in order to optimize the quality and size of your product images.

Key Points:

  • WooCommerce product images should be 800x800px
  • WooCommerce product images should be in JPEG or Webp
  • WooCommerce product images should not exceed 150kp
  • Create a template on Photoshop or Canva for consistency and efficiency

Read our blog on WooCommerce Product Images for more information.

Payment Options

Did you know that 71% of customers are likely to trust a business that offers their preferred payment method? Demonstrating why ecommerce businesses must invest in their checkout and provide customers with a range of payment methods.

Some of these include:

  • Credit and Debit Cards: One of the most seen checkout methods, using simple card information without retaining any additional information. Many trusted payment providers offer an unbranded checkout service, so selecting one with good quality, reliable service is essential. It’s also vital that the software integrates easily with your ecommerce platform as hiccups could quickly impact security, reputation, and a customer’s decision to purchase. 
  • Digital Wallets: this software retains card details and stores them securely behind personal identification such as a thumbprint and password.
  • Buy Now Pay Later: Allowing users to spread the cost on big-ticket items can increase the conversion rate. 
  • Bank Transfers: While this isn’t widely used in the UK, it’s common in European countries. Proving this option can significantly benefit and encourage overseas sales.
  • American Express: While this can carry additional fees for retailers, this may outweigh the financial gain of securing an increase in conversions.

Click here to find out about the best payment methods for maximum profit.

Hosting Providers

While the main priority is always the initial setup and implementation of a new website, it’s easy to overlook ongoing considerations such as hosting and support. There are various hosting providers on the market, offering different packages to suit all kinds of businesses and needs, from small start-ups to tech companies hosting multiple, high-traffic sites. This continual investment can cost a significant amount over time, so it’s worth investing in the right provider. Losses caused by poor hosting and downtime can significantly exceed hosting costs and substantially impact businesses, highlighting the importance of selecting the right hosting provider. 

Things to consider when selecting your hosting provider

  • SSL Certificate: Secure Sockets Layer (SSL) certificates require yearly renewal and management to ensure users have a safe browsing experience without warning messages
  • Unmetered bandwidth: a suitable amount of data available, capable of supporting peaks in website traffic without a disruption in service or site speed
  • Customer support: the support available to help with any downtime or interruptions in service
  • Security: select a secure hosting provider to reduce the risk of phishing, spam, viruses, and data fraud which can significantly impact user experience, customer loyalty, and the businesses reputation
  • Site backup service: frequently saving website data to prevent and limit the impact of potential threats
  • FTP Access: File Transfer Protocol (FTP) access means that it’s possible to gain access to the network files necessary to transfer to and from different hosting providers
  • Scalability: ensure that the hosting provider can cater to the long-term goals of your organization, preventing the need for a switch to a new provider further down the line

Based on the criteria detailed above, we’ve selected the following hosting providers for your consideration.

ProviderWPEngineKrystalKinstaDigital OceanCloudwaysNameCheapSiteground
Cost (monthly)£16 – £182+£4.99 – £99.99$30 – $1,500+$6 – $2,480$10 – $1,035£3.72 – £7.52£2.99 – £29.99
Sites1 – 30+1 – Unlimited1 – 150+1+1+3+1 – Unlimited
Storage10GB – 50GB10GB – Unlimited10GB – 250GB+25GB – 7.03TB25GB – 3,840GB20GB – 10GB – 40GB
Bandwidth50GB – 500GBUnlimited25,000 monthly visitsUnlimited1TB – 12TBUnlimited10,000 – 400,000 monthly visits

Click here to learn more about the WooCommerce hosting providers we’ve selected. 

Keen to learn more?

Stay informed with the latest ecommerce insights