Skip to main content
DesignWeb DesignWooCommerceWordpress #Design Web Design WooCommerce Wordpress

Designing Better WooCommerce Websites that Convert

Sean O'Brien October 16February 25th, 2022
Designing Better WooCommerce Websites that Convert

WooCommerce is one of the most popular e-commerce platforms on the internet, and now owned by Automattic, the company who created Wordpress. It’s flexible and powerful and works with almost any 3rd-party system thanks to the open-source community of Wordpress who have built thousands of WooCommerce extensions. We love WooCommerce here, and build all our e-commerce sites with it. The 3 reasons we chose to specifically focus on WooCommerce:

1) SEO – its setup amazingly straight out of the box for SEO and with a few tweaks here and there we have the perfect site specimen to meet Google’s structured data tools.

2) PAYMENTS – we build sites in various markets around the world where local payment gateways are used, WooCommerce syncs easily with anything you can imagine and means we only need to find the right plugin to link the local payment system up; no hassle for us!

3) IT’S FAST – when you combine lazy-loading images, clean code and with a lightweight theme you cannot be WooCommerce for speed. We’ve built websites with +20,000 products that load in <1.5 seconds on $10/m hosting. Anything is possible. It blows Shopify out of the water for speed.

You know it, we love WooCommerce. But how the f*** can we make sites that continue to convert when there’s so much competition in the online shopping space? Let’s dive through some of the features you can use to stand out when designing better WooCommerce websites.

Make it easier for customers with a one-page checkout

Woocommerce Websites That Convert 4

We completely removed the CART page on 1800printing.com to make it faster for customers to checkout. Using the ‘automatically redirect on add-to-cart’ option in WooCommerce settings, the customer is taken directly to the Checkout page once they’ve chosen to add to cart. We’ve combined the cart features in to the checkout on one page so they can see their order, add their details and pay all on one screen. This has dramatically increased conversions on mobile where customers don’t enjoy extra pages to click through. Removing the cart can be achieved with a few code snippets as suggested here by Business Bloomer.

Showcase the features that resonate with your audience

Woocommerce Websites That Convert 5

Another printing website we’ve built, Printing New York has a page dedicated to Environmental Protection. The printing industry has a difficult reputation for looking after the environment, due to the volatile chemicals used in printing presses and the large amounts of water and electricity used. Printing New York has made the environment a focus of their business and uses recycled paper as their standard cardstock, recycles their old plates and presses and uses soy-based inks which are much cleaner than oil based ones. Looking at the analytics, this page is getting consistent traffic as we’ve given it a prominent feature in the footer links and main menu. Customers are interested in reading about this topic and it’s helped us increase conversions on this site as this is an issue that resonates with our target audience.

Get attention with an unique design

Woocommerce Websites That Convert 3

Thanks to dropshipping, page-builders plugins and website builders such as Wix and Squarespace, the internet is a red-sea of e-commerce websites. It’s getting harder and harder to break out of the mould and get traffic to your site. As site development becomes easier and easier as page-builder plugins and templates improve for Wordpress, it allows designers to focus on the details and really improve designs when 10 years ago we would be spending a lot of time just building layouts and CSS grids which had to be written per site. One way to stand out in a crowded marketplace is to make your design really sing. This page by NFL merchandise brand Authentic, features huge CSS3 animations that take place on scroll, combined with large fonts – it really stands out in the NFL market where almost all stores look like the official NFL Shop.

Make searching the catalogue easier

Woocommerce Websites That Convert 6

Well, in 2020 the jury is out on whether infinite load for content is a type of ‘dark design’. Thanks to social media sites like Facebook, infinite loading content has created the possibility for users to become addicted to scrolling forcing the social networks to start adding checks and controls when users have spent too much time scrolling. That doesn’t mean infinite load can’t be used for good though. On WooCommerce sites, where there is a finite amount of products, infinite loading can improve the user experience by reducing the amount of clicks to sort through content and speed up the page-load speed as less products can be loaded at a time (less images needed to download!). The French shopping site, Million Dollar Gift Club gets rid of product filters and uses infinite load to showcase their long list of wacky presents. The important thing to get right with infinite load is making sure there are pages where users can access the footer and using it sparingly.

Make things easier wherever you can

Woocommerce Websites That Convert 7

Don’t just do what your template does, think hard about details that will make it easier for your customers throughout the whole shopping experience. We added a cart to the sidebar on Southwest Wholesalers. More recently, e-commerce sites are designed to get the customer to the checkout as soon as humanly possible, cutting out all the clutter in between. What about websites where we want customers to keep shopping and add many, many products to the cart? Mini-carts are usually found in the header and can only be accessed on hover which it clunky when you want to check many items. Adding the cart to the sidebar allows customers to see in real time what they are purchasing and the total amount. This is a stock-standard WooCommerce widget that is available on any WooCommerce website – try it out!

If you’d like some more inspiration of luxury websites, checkout these amazing luxury website designs at DesignRush.com.

Leave a Reply