WooCommerce Product List View Plugin: The Ultimate Guide
If you need a WooCommerce product list view plugin, look no further. This is the complete guide to installing and creating a beautiful WooCommerce product table. You’ll learn how to create WooCommerce custom fields and display products in an interactive WooCommerce product list, with optional features such as search and filter.
Learn how to create a simple WooCommerce product table, as well as more advanced lists with extra product data, including add to cart buttons and quick view lightboxes. The ultimate aim is to list WooCommerce products in new ways; to engage customers and increase your sales.
Do I need a WooCommerce list view plugin?
First, it’s worth thinking about whether you need a WooCommerce product list plugin at all! It depends on the type of products you’re selling, and your target audience.
A product list view is an excellent way to display the content of your Woo store if you have lots of products. It’s particularly suitable for listing more products per page, so that customers can quickly find what they want without needing to scroll between lots of pages. Adding Woocommerce custom fields also provides a simpler way to list WooCommerce products, without all the bells and whistles you get from other types of layouts.
While a WooCommerce list view can include images, these aren’t essential. Lots of people use product table plugins to display products in an information-only format; by creating WooCommerce custom fields without pictures you provide a a much simpler way for visitors to access your products. I’ll tell you how to do this later.
How to list WooCommerce products without a plugin
Before we look at how to use the WooCommerce Table plugin to create a product list view, I’ll reveal a simple way to list products without any extra plugins.
Most store owners don’t know that WooCommerce comes with a range of built-in shortcodes. One of these is called ‘Products’. True to its name, it lists specific products on any page, post or text widget.
You can use the Products shortcode to list products with specific SKU’s or ID’s. For example, I used this shortcode to create the product list shown below:
[products ids="50, 56, 87, 15, 1274"]
Issues with the basic WooCommerce product list shortcode
As you’ve probably already spotted, the built-in WooCommerce Products shortcode isn’t quite right for most stores needing to list products. Specifically:
- You have to manually choose which products to include in the list (WooCommerce custom fields) This makes it less useful because most people looking for a WooCommerce product list view want to automatically list all their products, or products from specific categories, for example. Either way, this isn’t possible with the Products shortcode.
- As you can see from the screenshot above, products are listed in the standard layout provided by your WordPress theme. They’re not listed with 1 product per row, which is what I would expect from a WC product list.
If you need to create dynamic lists that automatically update when you add new products, you’ll need a proper WooCommerce product list view plugin. The same applies if you want a proper list-style format, with 1 product per row.
WooCommerce Product Table plugin
WooCommerce Product Table offers a more sophisticated way to list products. With dozens of easy-to-use options, it has everything you need from a WooCommerce product list view plugin. For example, you can:
- List all WooCommerce products or products from specific categories (or even specific tags, WooCommerce custom fields, custom taxonomy terms, ID’s, etc.).
- Create simple lists with the product name only.
- Build more advanced lists with multiple columns of product data. The product list plugin supports various data including name, long and short description, categories, tags, price, weight, dimensions, stock, reviews and attributes. If this isn’t enough, you can create extra columns containing data from WooCommerce custom fields and taxonomies.
- Show/hide elements above and below the table, such as keyword search and product filters.
- Link products to the single product page, or disable links and display a read-only list.
- 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 will appear at the bottom.
- If you want to list 100’s or 1,000’s of products, there’s a lazy load option to boost performance. Instead of loading your entire product list at once, each page is loaded one at a time.
- Used with its sister plugin, WooCommerce Quick View, you can even add quick view lightboxes to your product lists!
Next, discover some other sites that use the plugin to create a WooCommerce product list view. Then learn how to set it up on your own site. Keep reading to learn more!
What are others saying about the WooCommerce product table plugin?
You can read lots of reviews on the WooCommerce Product Table page. Here’s a review from Joseph, a store owner who used it to create a WooCommerce list view:
As you can see, WooCommerce Product Table is much more flexible than the built-in product list shortcode. Next, learn how to create your own WooCommerce product list view and WooCommerce custom fields.
Case study – A WooCommerce product list view plugin for Dunbar Sales
Jupiter Multimedia were 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 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 their 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 WC Fields Factory to add an extra text field to the list.
How to create a WooCommerce product list view
Follow these steps to create your first product lists in minutes!
(I’m assuming that you already have a WordPress website with WooCommerce installed and some products added. Use the official WooCommerce documentation if you haven’t already done this, and then you’ll be ready to start creating WooCommerce product lists.)
- Get WooCommerce Product Table. Download the plugin files and copy your license key from the confirmation email.
- In the WP admin, go to Plugins -> Add New and upload the plugin files before activating the plugin.
- Go to the plugin settings page: WooCommerce -> Settings -> Products -> Product Table. Enter and save your license key, and choose the default options for your product tables.
- Go to the page where you want to add a WooCommerce product list – either by creating a new page or editing an existing one. (Or if you prefer, you can list products on a post or text widget.)
- Add the following shortcode:
This will list WooCommerce products in a table with the columns and options you chose on the settings page. It will look something like this. The exact styling is inherited from your theme so that everything matches the rest of your website:
Next, I’ll provide examples of other ways you can use the plugin to create a WooCommerce product list view.
Simple WooCommerce product list with product name only
Perhaps you want a very simple list of WC products, with the product name but no other information. That’s fine – just because the list view plugin lets you add extra columns of information doesn’t mean you have to!
The following shortcode will create a simple product list in alphabetical order. I have hidden all the extra fields such as the search box, product count and filters. (Note: If you already selected any of these options on the product table settings page, then you don’t need to include it in the shortcode as it will happen automatically.)
[product_table columns="name" search_box="false" reset_button="false" page_length="false" totals="false"]
Product list with image, name, reviews, price & add to cart with variations
You’re not just limited to creating a list of WooCommerce product names. If you prefer, you can display more product data in the list. Each piece of data is listed as a separate column.
To do this, you need to expand your product table shortcode to specify the columns you’d like to include in the list. For example, the following shortcode will create a product list view with columns for image, name, reviews, price and add to cart buttons. I’ve activated the ‘variations’ option so that if you have variable products, customers can choose options before adding to cart. I’ve also added filters, hidden the total product count and changed it to list 5 products per page:
[product_table columns="image,name,reviews,price,add-to-cart" variations="true" filters="true" rows_per_page="5"]
Check out the knowledge base article on which columns you can add to the product list, and how to use them. Use the rest of the plugin documentation to change any other elements in your product list view.
Add quick view to your WooCommerce product list
By now, you’ll have gathered that a WooCommerce product list view 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 quick view to your product listings. This adds optional quick view buttons to the product 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 realistically 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 list view. Instead, customers can view the basic product information in the product list; and choose options and add to the caret from a quick view lightbox.
How to set up WooCommerce quick view
- Follow the instructions above to create your WooCommerce product list view with the WooCommerce Product Table plugin.
- Next, get its companion plugin – WooCommerce Quick View Pro. (Tip: You can either get it as a separate plugin, or if you buy the Agency license for WooCommerce Product Table then you’ll receive the quick view plugin free of charge.)
- Go to Plugins -> Add New and install and activate WooCommerce Quick View Pro.
- Go to the WooCommerce Product Table plugin settings page at WooCommerce -> Products -> Settings -> Product tables and add
quick-viewto the list of columns.
- Finally, go to the Quick View plugin settings page at WooCommerce -> Products -> Settings -> Quick view and choose the layout for your quick view lightboxes and what information to include in them. There are lots of options, so read through them all.
Think carefully about which information to include in the quick view. Ideally, this should display information that you haven’t included directly in the product list view. For example, if you haven’t included a reviews column in the product table then you can add this to the quick view. You can also show the full image gallery in the lightbox.
WooCommerce Quick View
Transform your product list view with quick view popups.GET THE PLUGIN
Multiple column layout with a different product list in each column
If you only need a small amount of information about each product, then you can use product list views within a multi-column layout.
You can do this by creating a page with a 3-column layout and adding a different product table to each column.
If you already have a page builder plugin installed on your site (e.g. Visual Composer, Divi Builder, Beaver Builder, Elementor or Gutenberg) then you can use this to create the columns. If you don’t have a page builder plugin then you can also do this with the free Shortcodes Ultimate plugin.
Once you’ve added the columns, put a product table shortcode in each one. Each shortcode should list products from a different category.
Examples of websites needing a WooCommerce list view
By now, you know how to use the product table plugin to create a dynamic WooCommerce list view. Before we finish, let’s look at examples of the sorts of websites that will benefit from listing products in this way.
WooCommerce wholesale area
Wholesale or trade stores list products in a very practical, factual layout.
Unlike retail customers, wholesale users are already familiar with your product list and know what they want. They don’t want to spend extra time scrolling between your retail store pages, with large images and other distractions.
A WooCommerce product list view is perfect for WC wholesale stores. Products are listed in a compact tabular layout with all the information that wholesale customers need. This will include practical data such as name, price and product attributes. The product list won’t include marketing information such as big images, reviews or descriptions.
Read-only WooCommerce product catalogues
Not all WooCommerce websites actually sell products online. If this sounds strange, think about it for a minute. WooCommerce offers cost-effective, easy-to-use ways of adding and managing products on your website. This is useful, even if you don’t offer a full e-commerce facility.
A WooCommerce product list view plugin offers an easy way to display products without letting customers order via your website. To do this, simply use the WooCommerce Product Table plugin to list products without an add to cart column. Add
links="none" to your product table shortcode to prevent customers from clicking through to the single product page.
This will create a read-only product catalogue. It will list your products in a neat list view, without the ability to buy online.
If your list contains lots of products then you can add features to make it easier for customers to find what they need, using WooCommerce custom fields. You can achieve this by activating the search, sort and filter features in the product list. Customers can browse the list in the usual way, or use these features to instantly narrow the list in any way they like.
WooCommerce events website with list of upcoming events
As the world’s biggest e-commerce plugin, WooCommerce isn’t just about selling products. With extensions such as The Events Calendar, you can transform it into a full events system. You might want to create a simple list of events, or sell tickets by creating fully bookable event ‘products’.
If you’re using WooCommerce to take event bookings, you can use the product list view plugin to automatically list all your event tickets in a table. Include information such as price and add to cart buttons, and take event bookings directly from the list view!
Note: WooCommerce Product Table can only be used to list event tickets, as these are WooCommerce products. If you want to list the actual events instead, you can do this with our other table plugin – Posts Table Pro. We’ve also written a tutorial on how to use Posts Table Pro to list events.
WooCommerce food order system
WooCommerce is hugely popular with restaurants and takeaways, who use it to take online food orders. The only problem is that the standard WooCommerce layouts aren’t very well-suited to food delivery ordering.
By using a WooCommerce product list plugin, restaurant owners can easily create a layout that replicates a traditional paper menu.
You can add a product list for each section on the menu (e.g. starters, mains and desserts), with BUY buttons so that customers can add to cart directly from the list view. This is much more customer-friendly than using WooCommerce to take food orders without a list view plugin.
List view as an alternative to product variations
I would never have thought of this myself, but one of our customers – First Kitchens – uses product list views as an alternative to variations.
Lots of people dislike WooCommerce variable products because they’re so fiddly to set up and manage. Especially if you have large numbers of variations.
Instead of using variations, First Kitchens have created a category of products for each type of kitchen door. They list all the available options as separate products, presented in a product list view. Customers can add as many options as they like to the cart to create a bespoke kitchen package.
Here’s an example of a product list on their website.
‘Build your own’ WooCommerce product configurator with lists
A WooCommerce list view is also perfect for websites offering a ‘build your own product’ system. You might want to list lots of products as part of a vegetable box, build a box, create a luxury hamper, build a burrito or create your own sandwich order form.
By listing each category one at a time, you can take customers on a journey to build a custom product.
For example, they can choose the style of box, choose the box contents and then choose how it will be wrapped and decorated. You can provide extra product options – either by using variable products, or by using WooCommerce Product Table with the official Product Add-Ons plugin.
How will you use WooCommerce product list?
I hope this tutorial has helped you understand how to create WooCommerce product list views for your own website, as well as examples of product lists in action.
I’d love to hear how you use product lists or WooCommerce custom fields on your own website. Please leave your comments below.