This is a guest post by Katie Keith from Barn2 Media. Katie is the operations manager for Barn2, where she’s focused on giving top-notch advice on how to get the most out of WordPress based on her extensive experience with WordPress & web design.
With average eCommerce conversion rates at just 1.33%, there are plenty of opportunities for WooCommerce store owners to increase sales. Page layout has a big impact on customer experience and can make or break an eCommerce site. A WooCommerce list view is an easy way to improve your store layout and quickly direct customers to the products they’re looking for. This has the potential to increase conversion rates and ultimately your sales.
A WooCommerce list view is an alternative way to present your products.
Most WooCommerce stores have a fairly traditional page layout — 3 or 4 products per row with large featured image, the price, add to cart button, and perhaps a short description. This is fine for small stores with just a few products. However, if you have many products, then this layout can make it time-consuming for customers to find what they’re looking for. WooCommerce filter widgets are useful to narrow down the selection, but you simply can’t see many products on the page at the same time.
In contrast, a WooCommerce list view displays products in a more space-saving format. Products are displayed in a sortable grid or table, with structured information such as name, price, category and possibly add to cart buttons. Customers might buy directly from the product list, or they might click through to the single product page.
With a WooCommerce list view, each product takes up significantly less space than a typical store layout. Customers can see many more products at a time, allowing them to make direct comparisons and quickly make buying decisions. They can instantly search the product list by sorting the table, entering a keyword or using product filters.
As well as helping customers to find the products they’re looking for, listing more products per page will help them spot other products they like. This is similar to the “Related Products” commonly displayed at the bottom of the single product page and cart on WooCommerce sites.
However, unlike related products, a list view presents lots of products in the same place. Customers will naturally skim read through the list and see what else you have to offer. Hopefully, they will see something else they like but weren’t actively looking for, increasing the average order value from your store. This is less likely to happen with traditional product layouts as fewer products are visible at a time.
A list view of WooCommerce products doesn’t have to include your entire inventory. You could list products by category, tag or something else (e.g. custom taxonomy). Perhaps you’d like to list your most popular / best-selling products in a grid. You could use traditional category layouts for your retail products and a list view for your WooCommerce wholesale area.
However you decide to use WooCommerce list views, the point is that they present products in a compact grid-style layout. This instantly directs customers to the products they want, making them less likely to leave your store and look elsewhere.
I’ll say it now: a WooCommerce list view isn’t for everyone. To decide whether to display your products in a list or grid, you need to think about your customers and the type of products you’re selling.
A product list view is ideal for WooCommerce stores where customers decide to buy based on information rather than pictures. You can include product images in the list, but they’re typically smaller than traditional store layouts. A list view prioritizes product data and the number of products per page. This can increase sales for WooCommerce stores where customers want to view lots of products at once and make quick buying decisions. For example:
- Product directory of books or CDs. Customers want to view information about each product and see what’s available, all in one place. (Another advantage of using WooCommerce list views for this use case is that you can embed audio clips or video directly into the list.)
- Online food ordering system for a restaurant, with separate lists of the menu items in each category (e.g. starters, main courses etc.). Customers ordering food online want to see everything on a single page, just like a printed menu.
- WooCommerce wholesale store where trade users buy the same products on a regular basis. They already know which products they need, so they don’t want to click through to a separate screen for each product.
- Quick WooCommerce order form, where customers choose all their products and add to the cart from a single page.
If you’re selling something visual, such as clothing or photography, then your store is better off with a standard WooCommerce layout. For these sort of products, customers need big pictures to choose the products they want. A WooCommerce list view is counter-productive for stores like this, as customers will be less attracted to the images.
For products that also require a lot of product information, such as headphones, TVs, or other electronics, taking customers to a dedicated product page or landing page can be preferable so they can see all of the information about the product in one place. For these sort of products, customers also tend to want to read product reviews for these sort of items, which can be shown right on the product page.
Stores selling high-ticket items, such as furniture or customized products, also likely want to send customers to a dedicated product page so they can read about specification options, see previews, choose customized options, or view / configure other product details.
There are surprisingly few plugins to create a WooCommerce list view. The free plugins such as Grid/List View for WooCommerce are pretty basic and not very flexible. For example, you can’t choose which information is displayed about your products, hide the images or disable the Add to Cart buttons.
The WooCommerce Product Table plugin is the most sophisticated way to create a list view, while still being easy to use. It lists WooCommerce products in a fully responsive searchable and sortable table with filters.
The WooCommerce list view is designed to inherit the styles from your theme. This means that it will look good straight away without any custom styling. If you like, you can use CSS to make any further styling changes via your theme or child theme.
The good thing about the WooCommerce Product Table plugin is that you can keep it very simple and stick with the default settings. Or if you prefer, you can use the many options to customize your WooCommerce list view to meet your exact requirements.
There are lots of ways to configure the list view, including:
- Product Data – Choose the information to be included in the product grid. The list view plugin supports most of the product data stored in WooCommerce. The options are: SKU, ID, name, description, short description, date, categories, tags, image, reviews, stock, weight, dimensions, price, add to cart, product attribute, custom field, and custom taxonomy term. These can all be columns in the product table.
- Attributes and Variable Products – You can display each product attribute as a column in the grid layout. For variable products, you can either let customers click a ‘View options’ button to choose variations on the single product page, or display variation dropdowns directly in the list view.
- Links – By default, customers can click on a product name in the list view to visit the single product page. This is useful for WooCommerce stores selling products where customers need more information. You can disable the links to use the WooCommerce list view plugin as a one-page order form.
- Add to Cart – You can choose to have normal add to cart buttons alongside each product, and/or multi-select check boxes to buy multiple products. Alternatively, you can hide add to cart completely. This is useful to create a read-only product catalog, or to force customers to buy from the single product page instead of the list view.
- WooCommerce Filters – The plugin comes with a choice of filters that can be used to refine the WooCommerce list view. You can add filters for categories, product attributes, tags or custom taxonomies.
- Multiple Tables – You can add several product lists to a page. For example, you might want to structure a page with sub-headings for each category and a grid of products from the relevant category underneath.
- Show or Hide List View Elements – You can play around with the appearance of the WooCommerce list view. Show or hide elements such as the search box, filters, pagination styles, number of products per page etc.
- Lazy Load for Large Product Catalogs – The lazy load (AJAX) option lets you list hundreds or thousands of products in the WooCommerce list view without affecting performance.
- Archive Template – WooCommerce Product Table is designed to be used on standard WordPress pages. The plugin documentation also includes guidance on modifying your theme templates to automatically display the WooCommerce list view on product archive templates, so this is an option too.
I’ll show you how to create a product list view in 2 stages. The first stage is really simple and will just take you a few minutes. After that, we’ll get into the optional settings to configure the grid in more detail.
To create a basic WooCommerce list view, you need the following steps:
- Get the plugin from barn2.co.uk ($59).
- Install and activate the plugin in the usual way.
- Navigate to WooCommerce > Settings > Products > Product Table, enter your license key and hit Save.
- Add the following shortcode to any page:
Once you save your license key and add the shortcode, you’ll see your products listed in a neat table or grid layout. This is the default WooCommerce list view. It includes columns for Name, Short Description (labelled ‘Summary’), Price and Add to Cart. Customers can choose how many products display per page (the default is 25). They can also sort by any column and search for a keyword.
This achieves everything that most people would expect from a WooCommerce list view. As we saw earlier, the Product Table plugin has many options to customize the table to suit different needs. If you want, you can use these options to continue configuring the table.
The easiest way to make changes to the WooCommerce list view is to use the plugin documentation. This describes each option in detail and provides examples of how to use the various options.
It’s also worth looking at examples of different list views in action on the plugin demo site. These show how WooCommerce Product Table can be used to create quick order forms, product catalogs and so on. You can copy the sample shortcodes from under each demo to create identical list views for your own WooCommerce store.
Finally, let’s end by looking at ways to use the WooCommerce List View plugin to increase your sales.
Listing products in a grid layout will help customers to find what they want without scrolling through lots of pages. This alone can reduce bounce rates.
Designing the product grid around customers’ needs will make an even bigger difference. You need to get into customers’ heads and think about what they want from your WooCommerce store. For example:
- Images – How important are images to attracting customers to your products? If images aren’t important, save space by not including an image column. For sites where images are a bonus but not essential, include small thumbnails. If images are vital, draw attention by increasing the image size.
- Multimedia content – Can you grab customers’ attention by displaying multimedia content in the list view? For example, you can embed product videos directly in the table.
- Filters – Think carefully about how customers will sort and find products.The WooCommerce list view plugin includes lots of options for displaying structured data such as attributes, tags and custom taxonomies. You can display these as clickable links in the table or as dropdown filters above.
- Pricing – Some types WooCommerce store benefit from showing prices on the main list view page. Others (usually stores with higher prices!) are better off by making customers click through before they can see prices.
- Add to cart – Customers are more likely to buy low priced products directly from a WooCommerce list view. More expensive items such as furniture work nicely as a list, but customers will normally want to view more information on the single product page before adding to the cart. For this type of store, it’s best to include links to the single product page without having add to cart buttons in the list.
As you can see, there are different ways to increase sales based on the nature of your products and customers. A WooCommerce store selling takeaway food will benefit from a one-page order form with add to cart buttons. In contrast, a website selling designer furniture might use a list view to summarize the products, while using the single product layout to provide more information and allow online ordering.
By planning a WooCommerce list view around your customers’ motivations, you can appeal directly to them. This encourages them to buy from you.
While pleasing customers won’t increase the number of visitors to your site, it will make each one more valuable by improving your conversion rates. With a higher proportion of visitors converting into paying customers, the revenue from your WooCommerce website will increase. Ultimately, this will help to make your store a success.