How to create a WooCommerce list view for your products

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 product 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!

Product Table - the best WooCommerce list view plugin

WooCommerce Product Table 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 choose which product information is displayed in the 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.
• 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.

"The WooCommerce Product Table is well thought out and provides a great responsive experience. The switch between desktop and mobile is elegant and clean. The plugin saved me hours or creating a *true* list view myself and then having to design a way for my own list view to be responsive. This saved me time and money. Very pleased with the results."

Edward Doriv - WooCommerce Product Table Customer

What types of store need a WooCommerce product list view?

A product list view comes in especially handy for:

• Technical or non-visual productsIf 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 data to allow easy comparisons between products.
• WooCommerce wholesale storesWholesale 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' productsIf 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 catalogsSome stores want to keep things simple and list products in a one-page format that mimics a traditional printed catalog or order form.

Think carefully about the type of products in your store, and whether they'll sell better in a WooCommerce product list view.

Further reading: 2 ways to list WooCommerce orders in the front end.

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.

To create a WooCommerce product list view:

1. Install the WooCommerce Product Table plugin.
2. The table builder will open when you activate the plugin. Use it to choose the main options for your product list views.
3. During the table builder, you can choose whether to enable the list view on all your shop pages, or insert tables to list products manually. If you chose the manual option then the final page of the table builder will provide a shortcode which you can use to list products. Alternatively, insert a 'Product Table' Gutenberg block and select the product list you just created.

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.

1. 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 when you create a product table:

• Columns - add Name but not other columns. This will list the product name but no other data.
• Sort by - select 'Name' and 'Ascending' order to list products alphabetically.

Also choose the following options on the plugin settings page at Products → Product Tables → Settings. 

• Search box - hide this.
• Reset button - hide this.
• Page length - hide this.
• Product totals - hide this.

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.

2. 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 table. This example has columns for image, name, description and buy.

Or to get even fancier, this WooCommerce list view has columns for image, name, reviews, price, and buy:

3. 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:

4. 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.

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!

FAQ

Benefits of a list view for your products

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:

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.