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!

WooCommerce Product Table - the comprehensive list view solution

A WooCommerce list view is a table format displaying one product per row. WooCommerce Product Table creates list views with customizable columns and display options.

WooCommerce Product Table is the best list view plugin because it's 100% flexible. With over 40 customization options, it has everything you need in a WooCommerce product list plugin. You can:

• Display products anywhere. Enable the WooCommerce product list plugin view on your default store pages or display products on custom pages anywhere on your site.
• Choose what product data to display. Select from 20+ types of product information that appears in the list view, including name, image, price, attributes, stock information, and custom fields.
• List products flexibly. Display all products, specific categories, tags, custom fields, or custom taxonomy terms.
• List products and/or variations. Show variations as dropdowns for each product, or list each variation on its own row.
• Make it easy to find products with column sorting, keyword search, and product filters.
• Choose how many products per page are listed (from 10 to 500+) and enable lazy load for large catalogs.

"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 productsTechnical products are non-visual items where specifications matter more than images. Technical or non-visual products benefit from showing more products per page and displaying extra product data for easy comparisons.
• Wholesale storesWholesale stores are businesses that sell products in bulk to trade buyers. WooCommerce wholesale stores save time with bulk ordering directly from the list view.
• Build-your-own productsBuild-your-own products are customizable items where customers select multiple components. 'Build your own' products like gift boxes or hampers require bulk-selection capabilities.
• Product catalogsProduct catalogs are organized displays of items mimicking traditional order forms. WooCommerce catalogs present products in familiar printed catalog formats.

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.

Step-by-step implementation

To create a WooCommerce product list view:

1. Install the WooCommerce Product Table plugin.
2. Activate the plugin to open the table builder automatically.
3. Choose your main display options in the table builder.
4. Select whether to enable list view on shop pages or insert manually.
5. Copy the provided shortcode or use the Gutenberg block.

The table builder allows you to enable list view on all shop pages or insert tables 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:

Related Options:

• If you want to give your customers the choice, you can also learn how to add a grid/list view toggle to your shop.
• For wholesale or large inventories, you might need to display all your products on one page to create a complete order form.

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

A basic list view is a single-column table format containing product names. 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 displays only product names in a minimalist format. 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

To display more than product titles, add additional columns to the table. 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.

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

Multiple column layouts display different product lists side by side. 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 create this layout by creating a page with a 3-column layout. Add 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

The Challenge: Dunbar Sales needed an e-commerce solution for technical products. Jupiter Multimedia was developing a WP website for Dunbar Sales, a leading supplier of MIL-spec adhesives, paints, coatings, lubricants, and corrosion preventatives.

The Problem: The default WooCommerce grid layout was inappropriate for technical products. 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.

Developer's Perspective: 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."

The Solution: WooCommerce Product Table provided the exact functionality needed. 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.

Additional Features: The team enhanced the list view with complementary plugins. 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.

Results: The project was delivered on time and within budget. The list view solution saved 40+ hours of development time compared to custom coding.

List WooCommerce products with quick view buttons

Quick view functionality enhances the WooCommerce list view shopping experience. 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.

Quick view lightboxes show extra information that doesn't fit in 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 enhances 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 WooCommerce products enhances user experience and drives sales. Benefits include improved product visibility and navigation:

Differences between a product grid and list view

Grid view and list view are two main display formats for e-commerce products. The main difference between the two is the layout and structure of the display products:

• Product grid view is a layout displaying product images in a grid formation. It typically shows 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.
• WooCommerce list view is a vertical layout format with each product on 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.