How to display WooCommerce product listings in your online store

Displaying WooCommerce product listings in a functional, interactive table layout is a great way to display more products in less space. It also enables you to display additional information related to each product such as its attributes, dimensions, colors, and price.

In this article, we’ll show you how to create and display WooCommerce product listings with product data and add to cart buttons. By the time you’re done reading, you’ll be able to list your products in a way that actively engages customers and increases sales.

Let’s get started.

Do I need a plugin for product listings?

The first step is to determine whether you need product listing functionality on your WooCommerce store. Ultimately, it all depends on two things: your target audience and the type of product(s) you’re selling.

Here are some scenarios where having a WooCommerce product listing plugin will be useful:

• You have lots of products Displaying product lists is super effective if you have lots of products. This is because it allows you to list more products per page.
• Improves customer experience Customers can view all of your products without having to scroll through lots of pages.
• Simplifies your user interface Product listings are inherently quite simple. Instead of messing around with complex layouts, you can display your products in a functional and interactive table.

Do any of these scenarios apply to you? Keep reading to find out how you can use the WooCommerce Product Table plugin to create and display product listings on your WordPress website. Before we get to the tutorial, let’s quickly run through the key features the plugin offers.

---

WooCommerce Product Table plugin

WooCommerce Product Table enables you to display product listings in a searchable, sortable, and filterable table layout. Here are some of the standout features on offer:

• List products from specific categories, tags, custom fields, custom taxonomy terms, ID’s, etc….
• Create product listings of product names only.
• Link individual product listings to single product pages or disable links to create a read-only list.
• Build advanced product listings that focus on displaying extra product information. Out of the box, it supports short (and long) descriptions, categories, tags, price, dimensions, weight, reviews, stock, and attributes.
• Transform your product listing into a functional WooCommerce order form.
• To make your product listings even more customer-friendly, you can use them with the WooCommerce Quick View Pro plugin and add quick view links to the list.

Some product listings feature products images while others don’t. Again, this depends on the type of products you’re selling. Many people use product listing plugins to display their products in an information-only format i.e. with no product image. You can setup the WooCommerce Product Table plugin to display whichever format you prefer.

Keep reading to learn how to use it to create flexible product listings.

---

How to use WooCommerce Product Table for product listings

Assuming you already have a WordPress website with WooCommerce set up and some products added, we’ll show you how you can create a simple WooCommerce product listing for your online store.

1. Get the WooCommerce Product Table plugin and copy your license key from the confirmation email.
2. From the WordPress admin panel, head over to Plugins > Add New and upload the plugin’s zipped file to your website. Activate the plugin on your site.
3. Navigate to WooCommerce > Settings > Products > Product Table and enter your license key. You can also configure the plugin’s settings from this screen based on your preference.

4. Go to the page you’d like to add the WooCommerce product listings to. You can either create a new page or edit an existing one.
5. Finally, add the following shortcode in the text editor: [product_table]

This will list your WooCommerce products in a table layout using the plugin’s default columns. It should look something like this:

In the next section, we’ll take a look at how you can configure the plugin to get different product listing views.

See different types of product listings in action on the WooCommerce Product Table demo page!

Display extra information on product listing pages

You can choose what information you’d like to include in your product listings simply by changing the plugin settings. Or if you want to create more than one product table, each one different, then you can edit the shortcode instead. Below, we’ll show you how you can create a product listing that displays product names only. We'll also walk you through the process of creating a table layout that displays more information.

Product name only

If you want to display a simple list of the names of your WooCommerce products, add name to the columns option on the plugin settings page. Alternatively, set up your shortcode like this:

[product_table columns="name"]

As a result, it should look something like this on the front-end:

Product listing with image, name, reviews, price, and add to cart button

You can display as much product information as you’d like in you WooCommerce product listings. Each piece of data will be listed as a separate column.

All you have to do is set the Columns option on the product table settings page to: image,name,reviews,price,buy shortcode to specify which columns you’d like to display on the front-end. Alternatively, the shortcode given below will display your products’ image, name, reviews, price, and add to cart button in the product listings:

[product_table columns="image,name,reviews,price,buy"]

It’ll look something like this on the front-end:

Check out the available column options to create your own custom product listing!

Choose which categories and tags are displayed

With the WooCommerce Product Table plugin, you can choose which taxonomies (categories, tags, and custom taxonomies) to include in your product listings. For example, the category option lets you display products from a specified category.

What's more is that you can specify multiple categories to be displayed in your product listings:

• Using commas. Comma separated categories in the format category="category1, category2" means products in category1 OR category2.
• Using the plus (+) sign. Plus sign separated categories in the format category="category1+category2" means products in category1 AND category2.

So, if you wanted to display products (with product information) from the categories Accessories and Hoodies, the shortcode would look something like this:

[product_table category="hoodies,accessories"]

Here’s a preview of what it would look like on the front-end:

You can use tags the same way simply by replacing category with tag. For more options, check out our tutorial on listing specific products using the WooCommerce Product Table plugin.

Choose whether to show the add to cart button and variations

If you’re looking to create simple product listings then you might not want to display an add to cart button. All you have to do is remove it from the comma-separated list of columns that you want to display in WooCommerce product listings. For example:

[product_table columns="image,name,reviews,price,category"]

It might look something like this:

If you're using the add to cart column, then you can choose from two different ways to display variable products in your product listings:

• Display variations as dropdown lists
• List each variation on a separate row

To display the variations as dropdown lists, choose this option on the plugin settings page or use the shortcode [product_table variations="dropdown"].

It will look something like this:

On the other hand, if you’d like to list each variation on a separate row, you can use that option or the shortcode [product_table variations="separate"].

It will look something like this:

Bonus tip: Add quick view to your product listings

Sometimes, you want a way of providing extra information about your products without taking people to a separate page for each product. You might also have too many product options or variations to fit into the product listings view, and need another way to purchase.

You can achieve both these things by using WooCommerce Product Table with its sister plugin, WooCommerce Quick View Pro. This plugin adds quick view buttons and/or links to the product list. Customers can click on this to view more information in a lightbox.

Depending on how you set it up, this might include the full product image gallery in a lightbox, or other information such as categories, meta, price, short description, or even embedded audio or video players. You can also include add to cart information including product variation dropdowns.

Quick view is a good way to extend your WooCommerce product listings while keeping customers on the same page.

Get WooCommerce Quick View 

---

Create perfect WooCommerce product listings

The Product Table plugin is great for displaying WooCommerce product listings on your online store in a searchable, sortable, and filterable table layout. In addition to this, it gives you the flexibility to add images to your listings or go with an information-only format.

Let’s quickly recap the different ways you can display products listings using the WooCommerce Product Table plugin:

• List product names only or display additional product information in a table layout.
• Choose which categories, tags, or custom taxonomies you’d like to display.
• Show the add to cart button in your product listings to encourage prospective customers to buy.
• Hide the add to cart button for catalog-style product listings.
• Display variable products separately in rows or as dropdown lists.

How do you display product listings on your WooCommerce website? We’d love to hear from you so let us know by commenting below!