Looking for a way to display WooCommerce products in a more compact and user-friendly way? If so, then a list view might be just what you need. A WooCommerce list view allows customers to quickly scan through your products and find what they're looking for without the clutter of a traditional grid layout.
In this tutorial, we'll go over how to create a WooCommerce product list, step by step. You'll learn how to list products in a user-friendly table layout, complete with extra features like additional product information, searching and filtering.
We'll be creating a list view of your products using a plugin called WooCommerce Product Table. This WordPress plugin comes with everything you need to create a WooCommerce list view. It has dozens of customization options which you can use to create a flexible product list based on your exact requirements.
Customers can view more products per page, see product data, choose options and add to their cart - all directly within the list view. The end result will be a fully customizable product list that looks something like this:
Let's get started!
Benefits of a list view for your products
First, let's look at the benefits of a WooCommerce product list view and think about whether it's right for your online store.
A list view for your WooCommerce products offers several benefits that can enhance user experience and ultimately lead to more sales. Here are a few key benefits:
- Improved user experience: With a WooCommerce list products view, customers can quickly and easily scan through a list of products. They can also find what they're looking for without having to navigate through multiple pages.
- Increased sales and revenue: By displaying more products on a single page, customers are more likely to find products they're interested in. This will lead to increased sales and revenue for your store. This effect is increased by adding order form functionality to the list view so that customers can choose options and add to their cart without leaving the page.
- Improved navigation: A product list view allows customers to quickly scan through your products in a linear fashion. This makes it easier to find what they're looking for without having to scroll through a grid of products. The built-in searching and filtering above the product list makes it even easier to find products.
- More information per row: With a WooCommerce list products view, you can display more product information per row than with a traditional grid layout. This can be especially helpful for products that require more details information or have multiple variations. The extra information can also boost your SEO.
- Reduced bounce rates and cart abandonment: Customers are less likely to become frustrated and abandon their shopping carts. Because of this, you will have a lower bounce rate and increased conversions.
- Better mobile optimization: A WooCommerce list products view is often better optimized for mobile devices than a grid view, as it allows for easier scrolling and navigation on smaller screens.
Differences between a product grid and list view
There are two main ways of displaying products on an ecommerce website: grid view and list view. The main difference between the two is the layout and structure of the display products:
- Product grid view is a popular way of showcasing products on WordPress websites. It displays product images in a grid formation, usually with 3 or 4 products per row. The per-page product count is usually 9-12 products. The grid layout view is perfect for visual products with big images such as clothing, shoes, and accessories.
- On the other hand, a WooCommerce list view displays products in a vertical list layout format, with each product taking up a separate row. This layout is better suited for WooCommerce stores that offer more detailed product information, as customers can easily see each product's features and specifications. List view is perfect for stores that sell technical or complex products such as electronics, software, or machinery. You can have an unlimited number of products per page, either in a single list or broken up using pagination or previous/next links to load more. Either include images in whatever size you like, or list WooCommerce products without images.
Nearly all WordPress themes list WooCommerce products in a basic layout. Compare how the products are presented in these two pictures:
As you can see, the default layout is very limited and not suitable for many types of product.
Isn't there already a WooCommerce list products shortcode?
Before we start looking at list view WooCommerce plugins, it's always a good idea to consider whether you can do it without a plugin. The answer is, sort of. Yes, there is a WooCommerce list products shortcode built into WooCommerce -
[products]. There are also Gutenberg blocks that you can use to list products anywhere on your WordPress site.
However, the shortcodes and blocks use the basic grid layout and not a proper list view:
That's why you need a WooCommerce product list plugin to create a true list of your products, with 1 per row.
Product Table - the best WooCommerce list view plugin
WooCommerce Product Table plugin is the best list view plugin because it's 100% flexible. With dozens of easy-to-use options, it has everything you need in a WooCommerce product list plugin. You can:
- Display products anywhere. As well as enabling the WooCommerce product list plugin view on your default store pages (e.g. the shop or category pages), you can display WooCommerce products on custom pages anywhere on your site.
- Choose what product data to display. You can easily control the information that is displayed in your list view. This includes the product name, image, price, attributes, stock information, and even custom fields that you've added to your products.
- List all WooCommerce products or products from specific categories (or even specific tags, WooCommerce custom fields, custom taxonomy terms, IDs, etc.).
- List products and/or variations. You can choose whether to list variations as dropdowns for each product, or with each variation listed on its own row.
- Create simple lists with the product name only, or more advanced lists with multiple columns of product data.
- Make it easy to find products with column sorting, keyword search, and product filters.
- Transform the product list into a complete WooCommerce order form, with product variations, product add-ons, add-to-cart buttons, and more.
- Choose how many products per page are listed before pagination links appear at the bottom.
- If you want to list 100's or 1,000's products, there's a lazy load option to boost performance.
- Used with its sister plugin, WooCommerce Quick View, you can even add quick view lightboxes to your product lists!
This type of product list view comes in especially handy for:
- Technical or non-visual products If your products don't need big product images (or maybe they don't need images at all!), then why waste space? Instead, use a WooCommerce list products plugin to show more products per page. You can also display extra product information to help people make quick buying decisions.
- WooCommerce wholesale stores Wholesale buyers are already familiar with your products and want a quick one-page order form layout. They don't want to waste time visiting a separate page for each product they wish to order.
- 'Build your own' products If you're selling custom gift boxes, hampers, or other 'build-your-own' products then customers need to bulk-select multiple items and add them to the cart together.
- Simple WooCommerce catalogs Some stores want to keep things simple and list of products in a one-page format that mimics a traditional printed catalog or order form. By keeping everything in one place, customers can easily compare products and make faster buying decisions.
Think carefully about the type of products in your store, and whether they'll sell better in a WooCommerce list products view.
Tutorial: How to create a WooCommerce list view
Next, I'll explain how to create different types of product list view in WooCommerce, step-by-step. Either watch the video, or read the written tutorial instructions below.
To create a WooCommerce product list view:
- Install the WooCommerce Product Table plugin.
- Use the plugin setup wizard to choose the main options for your product list views.
- Either tick the boxes in the setup wizard to enable the list view on all your shop pages, or list products manually using the shortcode
[product_table]. Then, you can modify that shortcode with a whole slew of shortcode options.
Depending on your settings, this will list WooCommerce products in a table like this. The exact styling is inherited from your theme/template so that everything matches the rest of your website:
WooCommerce product list view examples
WooCommerce Product Table lets you list products in many different ways. Just choose the settings that will work best for the types of products you sell.
To provide some inspiration, here are some example screenshots of different ways that you might set up your WooCommerce list view.
We'll start with a basic WooCommerce list view that just displays each product's title. Then, we'll build on that simple list with more columns, AJAX filter options, as well as only pulling specific products into the list.
A basic WooCommerce list view
Just because a WooCommerce list view plugin lets you add extra columns of information doesn't mean you have to! While you can include images, add to cart buttons and tons of data, these aren't essential. If you prefer, then you can list products in a much simpler format.
As a minimum, you can create a very simple list of WC products, containing the product name but no other information:
This WooCommerce product list is super-simple and minimalist. It lists products by name, with no other data or features. This is as simple as it comes!
Set it up by choosing these options, either in the setup wizard or the individual product table:
- Columns - add name to this field. This will list the product name but no other data.
- Search box - hide this.
- Reset button - hide this.
- Page length - hide this.
- Product totals - hide this.
- Sort by - select 'Name' and 'Ascending' order to list products alphabetically.
Personally, I like this type of simple product list for specific purposes only - for example, in a sidebar widget where there's limited space. On page layouts with more space, I prefer adding extra columns - and depending on the number of products, extra features like a search box and product filters.
Listing products with extra data
Now, let's say you want to do more than just display a product's title. Fortunately, you can display literally any type of product data in the list view. In addition, you can include a 'Buy' column complete with add to cart buttons, quantity pickers and variation dropdowns. This makes it much quicker for customers to buy their desired products.
To add more columns, you need to add additional columns to the 'Columns' option in the plugin settings. This example has columns for
image, name, description, buy:
Or to get even fancier, this WooCommerce list view has columns for
image, name, reviews, price, and buy:
Adding filters and search options
For stores with more than about 10 products, you can help customers find them by providing a search box and filters.
Here's an example of a full list of products with the search box and filters turned on:
And for even more advanced filtering for your product list view, use Product Table with its sister plugin - WooCommerce Product Filters. This adds a wide range of professional filter options, such as color swatches, image filters, and more:
Listing products in multiple columns
As we saw earlier, the WooCommerce Product Table plugin lists products with 1 item per row. However, you can create more complex page layouts with multiple columns, each listing different products:
You can do this by creating a page with a 3-column layout and adding a different product table to each column. You would create the multi-column page layout using the WordPress dashboard block editor (Gutenberg) or a page builder plugin like Elementor or Divi.
Once you've added the columns, put a product table shortcode in each one. Each shortcode should list items from different product categories.
Case study - A WooCommerce product list view plugin for Dunbar Sales
Jupiter Multimedia was developing a WP website for Dunbar Sales, a leading supplier of MIL-spec adhesives, paints, coatings, lubricants, and corrosion preventatives. The website would be selling highly technical, non-visual products that did not require large images. As a result, the default WooCommerce grid/list layout was inappropriate for their client's industry.
The developer said:
"I needed a TRUE list view and nothing else I tried could produce the results I required, short of trying to rebuild the entire archive page by hand. I wasn't into the idea of doing that due to the time involved and ability to upgrade as woo changes."
They were delighted to discover WooCommerce Product Table, which offered the list view and Woo custom fields they needed. This allowed them to deliver the website on time and on budget.
Jupiter Multimedia added extra functionality to its product list view by using WooCommerce Product Table with some third-party plugins. They used an Add to Quote plugin to allow customers to request a quote, and an extra product options plugin to add an extra text field to the list.
List WooCommerce products with quick view buttons
A WooCommerce list view plugin is a brilliant way to speed up the buying process. It works by keeping customers away from the single product page. They find products in the product list and add them to the cart without clicking away from the list. This encourages them to buy more and more, and there's no risk that they'll get lost!
You can improve this even further by adding a quick view to your product listings. This adds optional quick-view buttons to the WoCommerce list view, and/or replaces the links to the single product page with quick-view links.
It's a great way to show extra information that you can't really fit into the product list. If you have lots of variations or add-ons for your product listings, then there may be too many to fit nicely into your neat WooCommerce list view. Instead, customers can view the basic product information in the product list; choose options, and add to the cart from a quick view lightbox.
To add quick view, you need to use Product Table with its sister plugin, WooCommerce Quick View Pro. Once both plugins are installed, you can add a column called
quick-view in your list of product table columns. This will add a Quick View button for each product so that customers can easily launch the lightbox.
Want to set up a WooCommerce list view in just 15 minutes?
Creating a custom WooCommerce list products view for your products is a great way to enhance the shopping experience for your customers. With the flexibility and customization options available through WooCommerce Product Table, the possibilities are endless.
WooCommerce Product Table is a plug-and-play solution that 1000's of online store owners have already used to grow their sales. No technical knowledge is required - just follow the steps in this tutorial and you'll be up and running in minutes.
- Instant plug-and-play setup
- FREE knowledge base and tutorials
- Technical support is available if you need any help
- 30-day money-back guarantee. Love it or get a full refund, zero risk.
Whether you're looking to create a wholesale store, a simple catalog, an event-based system, or something entirely unique, a custom list view can help you achieve your goals. And with the ability to add multiple WooCommerce list products views to your site, you can provide a tailored experience for every type of customer.
Get the plugin and start getting more orders TODAY →
Do you have any other questions about using the WooCommerce list products shortcode? Leave a comment and we'd love to help!