The Ultimate Guide to WooCommerce Website Design in 2023

We’ve created a comprehensive guide on all the components required to achieve excellent WooCommerce website design and development in 2023. 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:

• Selecting The Right Ecommerce Platform
• WooCommerce Themes
• WooCommerce Editors
• Shipping Plugins
• Product Filter Plugins
• Size Product Images for Maximum Quality
• Payment Options
• Hosting Providers

We hope that this guide will provide helpful insight into the exciting, expanding market of WooCommerce website design and development.

Start planning your WooCommerce website today!

Selecting The Right Ecommerce Platform

When creating a website, the first consideration is identifying the best platform for your ecommerce store. Before choosing WooCommerce, you may want to consider the other platforms available, ensuring you make the right selection and have the best ecommerce solution for your online store.

Magento

Magento is one of the biggest ecommerce platforms in the world. 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 platform for your ecommerce website. Constructed on WordPress, it offers flexibility and ease of management. Catering to larger businesses as well as smaller enterprises and individuals without easy access to a website designer or developer. You can configure your WooCommerce 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!
Themes provide the ability to select the aesthetic shell, helping to stylize the website and knit the pages together.

In addition, themes 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.

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 both elements. If you decide to proceed with two separate providers, you need to confirm the compatibility before proceeding. 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 bolsters the value proposition for any WooCommerce software as you can share ideas, engage with others and 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 themes for WooCommerce website design and development:

• Divi (theme and page builder) 
• Elementor (theme and page builder) 
• Avada
• Flatsome 
• WoodMart 
• Storefront
• Blocksy 
• Astra

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. 

WooCommerce web design and development can be made easy using page builders and editors, which are perfect for creating beautiful pages. Many platforms include various design options and are frequently seen with valuable tools. These can include extensive widgets, live editors and drag-and-drop functionality. Allowing the user to see their design while they work, removing the guesswork usually required during a WooCommerce project.
Many platforms have also removed the need for any alterations to the code. This means that users can make significant changes to their website without any design services or developer knowledge.

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’s search engine friendly and 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.

Provider	Elementor	WPBakery	BeaverBuilder	Oxygen Builder	Divi Builder	Gutenberg
Price	Annual: $99	Annual: $56 – 299	Annual: $99 – £399	Lifetime: $129 – $349	Annual: $89 Lifetime: $249	Free
Rating	9/10	8/10	8/10	8/10	9/10	6/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 plugins available that can elevate your WooCommerce web designs. However, installing a significant number can easily overwhelm the system, resulting in slow load times and poor performance. It’s recommended that you cherry-pick your woocommerce plugins to add value by improving the function and usability of your online shop. 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 integral as it can alter a customer’s decision to purchase. Have you ever gotten to the checkout and been put off by hefty shipping fees? Research shows over 61% of shopping carts are abandoned due to additional costs such as shipping, taxes, and fees.
Adding a shipping plugin as part of your WooCommerce web design can help to get this element right. Find a plugin capable of providing transparency, automating the shipping process, and ensuring 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: A straightforward plugin can aid 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. 

We identified three common ways of calculating shipping costs, including a blanket approach, per-product pricing and the creation of rules. Finding a suitable shipping plugin is primarily down to identifying the costing method for your organization. 

	WooCommerce: Conditional Shipping and Payments	WooCommerce: Table Rate Shipping	WooCommerce: Per Product Shipping	Shiptheory
Flexibility	Somewhat flexible	Potentially limited	Very flexible	Very flexible
Customer roles	Wholesale and membership	No	No	No
Subscription service	Yes	No	No	No
Additional Integrations	Many available	No	No	Many available
Scalability	Potentially limited	Good	Potentially limited	Potentially limited
Pricing Structure	Potentially complex	Good	Potentially complex	Potentially complex
User interface	Good	Excellent	Good	Excellent
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 WordPress websites and 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: Select robust software with a range of applicable filters, aligned to your product range and customers
• Easy Download and Implementation: Select a plugin that is easy to download and implement. The software is usually at a lower price point, 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. 

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, you should size them for maximum quality.

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

Payment methods should be an incredibly important consideration during your WooCommerce website design and development. 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. Problems or hiccups could quickly impact security, reputation, and a customer’s decision to purchase. 
  • Providers include SellerdeckPay by ClearAccept, Square, and Stripe
    
• Digital Wallets: this software retains card details and stores them securely behind personal identification such as a thumbprint and password.
  • Providers include Apple Pay, Google Pay, PayPal, and Amazon Pay
    
• Buy Now Pay Later: Allowing users to spread the cost on big-ticket items can increase the conversion rate. 
  • Providers include PayPal, Klarna, and V12 Finance
    
• 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

Hosting and support are factors that you must consider during the construction of your WooCommerce website. While they may not be the main priority during the initial setup and implementation, they’re a vital ongoing consideration. There are various hosting providers on the market, offering different packages to suit all kinds of businesses. Meeting the needs of anything from small start-ups to tech companies hosting multiple, high-traffic sites.
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. Therefore, it’s vital to select the right hosting provider for your ecommerce business.

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 – this will prevent negative implications to 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: select a hosting provider capable of meeting the long-term goals of your organization, preventing the need to switch to a new provider in the future

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

Provider	WPEngine	Krystal	Kinsta	Digital Ocean	Cloudways	NameCheap	Siteground
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
Sites	1 – 30+	1 – Unlimited	1 – 150+	1+	1+	3+	1 – Unlimited
Storage	10GB – 50GB	10GB – Unlimited	10GB – 250GB+	25GB – 7.03TB	25GB – 3,840GB	20GB –	10GB – 40GB
Bandwidth	50GB – 500GB	Unlimited	25,000 monthly visits	Unlimited	1TB – 12TB	Unlimited	10,000 – 400,000 monthly visits

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

Keen to learn more?