Need to create a WooCommerce list view as an alternative to the standard WooCommerce product grid?
In this post, you'll learn how to create a fully customizable product list that looks something like this:
Using a simple plugin, you'll be able to control exactly what information displays in your list view. And you can also optionally add different types of search, sort, filter, and pagination options.
This comes in especially handy for:
- Wholesale stores
- Simple WooCommerce catalogs
- Events (if you've integrated WooCommerce with an events plugin)
- A custom restaurant ordering system based on WooCommerce
And you might have your own unique need for a WooCommerce list view of products, as well!
Isn't there already a WooCommerce list products shortcode?
Well, sort of. Yes, there is a WooCommerce list products shortcode built into WooCommerce. But it doesn't function the same as the example above.
If we were to display the exact same set of products using WooCommerce's built-in
[products] shortcode, it would look like this:
As you can see, it's still a product grid, not a list. Basically, it's just a product grid that you can place anywhere. If that's what you want - congrats! You don't need an external solution - just use that shortcode.
But if you want more of a traditional WooCommerce list view, where products are stacked vertically on top of one another in a table format, you'll need the WooCommerce Product Table plugin.
WooCommerce Product Table lets you display all or some of your WooCommerce products in a tabular list view. If you just want to a list of each product's name, you can do that. But you can also add additional columns for:
- Product descriptions
- Add to cart buttons
- Any custom field
Plus, the options to include/exclude products are much deeper than the core WooCommerce list products shortcode. You'll be able to filter your WooCommerce product list view by:
- Category, tag, or custom taxonomy
- Product ID
- Custom field value
- Publish date
- In stock status
Below, we'll show you how you can use WooCommerce Product Table to create a list of WooCommerce products at your store…
How to create a WooCommerce list view with product tables
WooCommerce Product Table lets you create lists of your products by using a simple shortcode.
The basic shortcode is
[product_table]. Then, you can modify that shortcode with a whole slew of shortcode parameters.
For this tutorial section, 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, filter options, as well as only pulling specific products into the list.
We'll give you several specific examples. But if you want to see everything that the WooCommerce Product Table shortcode can do, you can see every single shortcode option in the help article below:
A basic WooCommerce list view
To create a simple list that just displays the title of each product, first go to the plugin settings page. You'll find this at: WooCommerce → Settings → Products → Product Tables. Enter your license key and choose the relevant settings. You'll need to change these settings to create the WooCommerce list view in the screenshot above:
- 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.
Now, go to the page where you want to add a WooCommerce list view of your products. Add a
[product_table] shortcode to the page. View your page, and you'll see a simple WooCommerce list view of your products.
Filtering out specific products
The shortcode above will list every single product at your store, which might be overwhelming if your store has hundreds of products.
To create a WooCommerce list view of a specific set of products, you can use WooCommerce Product Table's many include/exclude options.
Again, you can include/exclude products by criteria like:
- Post ID
- Custom taxonomy
- Custom field
- In stock status
- Publish date
For example, to filter only products in the Clothing category, you could use this shortcode, where category="[your_actual_category_slug]":
Adding columns for image, description, and add to cart
Now, let's say you want to do more than just display a product's title. You want to also include:
- The product's featured image
- The product's description
- An add to cart button
To do that, you would just add additional columns to the 'Columns' option on the plugin settings page.
Controlling filters and search options
So far, we've used the plugin settings page to manually turn off options for visitors to search and filter products in your list. But if you do want to enable that functionality, you can:
- Change "false" to "true"
- Add additional parameters for sorting and filtering
Here's an example of a full list of products with the search box and filters turned on:
You can create your own unique WooCommerce list view, too
While we tried to give you several relevant examples above, you're by no means limited to the different product list examples you saw above. You can add as many WooCommerce list views to your site as you like, each one different.
By applying WooCommerce Product Table's full list of options and shortcode parameters, you can create lists of products that are truly unique to your store. Click below to get started:
Do you have any other questions about using the WooCommerce list products shortcode? Leave a comment and we'll try to help!