WooCommerce Product Catalog Tutorial
Discover the easy way to create a WooCommerce product catalog table. Ideal for large product directories, your products will be listed in a searchable table with filters.
You can create a read-only catalog, or an order form with Add to Cart buttons. This tutorial will teach you how to create the ultimate product catalog using the bestselling Product Table plugin.
A WooCommerce product catalogue plugin is ideal for creating a 1-page view listing all your products. It makes it easy for customers to sort products and find what they’re looking for. A catalogue layout displays products in a neater and more compact way to the default WooCommerce store layout.
A catalogue layout makes it possible to display more products per page, so your customers can view them all together. It’s perfect if you need a larger WooCommerce product catalogue table, for example, you might have 100s or 1,000s of WooCommerce products.
Who needs a WooCommerce product catalogue plugin?
A WooCommerce product catalogue plugin is useful for any website that needs a user-friendly way to present lots of products. The products are listed in a structured table or grid layout, so customers can view more products per page. Typically, a product catalogue will include features to make it easier for customers to find specific products, including keyword search, filters or sort options.
Product catalogue layouts have many possible uses, such as:
- WooCommerce order form – Your product catalogue can include Add to Cart buttons or tick boxes to add multiple products to the cart. This lets it double as a fully functional order form for WooCommerce. Or you can hide the add to cart facility to create a read-only WooCommerce catalogue.
- WooCommerce restaurant food ordering system – A restaurant or takeaway business can use the product catalogue plugin to let people view menus and order food online.
- Product directory – A product catalogue can also function as a complete WooCommerce directory, with large numbers of products listed in an easy-to-find format.
- WooCommerce wholesale catalogue – WooCommerce Product Table is hugely popular for wholesale catalogues. List all your wholesale products in a structured catalogue layout to help trade users quickly find and order their products. You can use it with our other plugin, WooCommerce Password Protected Categories, to create a hidden wholesale area separate from your public shop.
Would you rather create a simple product list view? Check out our other tutorial on creating WooCommerce product lists.
What features can a WooCommerce product catalog table have?
The WooCommerce product catalog plugin lets you create the ultimate product catalog, listing various data about each product, including columns for:
- Product name
- Short or long description
- Add to cart button (with or without quantity selector and product variations)
- Product image
- Stock status
- Product categories
- Custom fields (which can include various information. e.g. HTML links, shortcodes from other plugins, images, video, audio players etc.)
- Custom taxonomies
- And more
There are also lots of extra features relating to how the product catalog is displayed, and how customers interact with it. For example, you can add filter dropdowns for category, tag, attributes, variations, and custom taxonomies above the table. You can add sidebar widgets to filter by attribute, price or rating. You can show or hide elements, including the search box. There are even options to control how the responsive product catalog behaves on mobiles.
You can either have a single product catalog page listing all your WooCommerce products, or, divide a catalog into sections. For example, you might have separate tables for products with specific categories, tags or custom field values.
How to create the ultimate product catalog:
To get started, your website should have 2 plugins installed:
- WooCommerce (free – download from the WordPress plugin repository)
- WooCommerce Product Table (purchase here)
You can then follow these instructions to create the ultimate product catalog.
1. Create a page for the WooCommerce product catalog table
First, create a new page for the product catalog by going to Pages > Add New in the WordPress admin. Call the page whatever you want, for example ‘Product Catalog’.
2. Enter the default WooCommerce Product Table shortcode
Now, enter the WooCommerce Product Table shortcode which will create a table displaying your ultimate product catalog (we’ll add more columns in the next step!). This shortcode will list your WooCommerce products as a searchable, sortable table.
Publish the page and click View Page to see your WooCommerce product catalog table.
You’ll see a dynamic catalog listing all your WooCommerce products. It’s currently using the default column headers – these may or may not be relevant to your particular product catalog, but we’ll edit these shortly. The default columns are product name, short description, price and add to cart button:
3. Choose which columns appear in the WooCommerce product catalog table
Next, I’ll show you how to choose which product data to include. This will make the table more suited as a WooCommerce product catalog.
It’s time to make some changes to the WooCommerce Product Table shortcode to control which columns are displayed in the catalog. Go back to the Edit Page screen for your product catalog and try replacing the default shortcode with this:
This adds a ‘columns’ parameter to the shortcode. In the example above, I’ve added the following columns:
- sku – the unique identifier for the product. Many product catalogs include a product code or ID to make products easier to identify.
- name – the main title for your product.
- description – the long description for the WooCommerce product.
- categories – this tells the catalog to display a filterable column listing the product categories each product is in. Customers can click on a category to filter the table for products in that category.
- att:size – this tells the product catalog to include a column for the ‘size’ attribute. Use this format for any product attributes you wish to include in the catalog. Instead of ‘size’, add the slug for the attribute in your WooCommerce store.
- tags – this adds a filterable column listing the tags for each product.
- price – this tells WooCommerce Product Table to display a price field.
Use the product table knowledge base to see which other columns are available. It also tells you how to rename the columns in your WooCommerce product catalog table or hide column headings.
Now Update and View your page. You’ll see the table is now a very useful WooCommerce product catalog and the 7 columns are those we listed in the product table shortcode:
4. Add filters to the WooCommerce product catalog table
Another neat option in WooCommerce Product Table is the ability to add filter dropdowns and filter widgets so customers can quickly and easily find the products they need in your product catalog.
WooCommerce catalog filter dropdowns
To add filter dropdowns, add
filters="true" to the product table shortcode. For example:
[product_table columns="sku,name,description,categories,att:size,tags,price" filters="true"]. Alternatively, you can use the knowledge base to control exactly which filters appear in the product catalog view.
WooCommerce product filter widgets
The product catalog plugin also comes with its own version of all the WooCommerce filter widgets. These include a widget to show the active filters, a layered nav filter listing product attributes, a price slider and ratings filter.
Make sure your product catalog is on a page that contains the product table shortcode and has a sidebar area (e.g. left or right column). You can then add filter widgets by going to Appearance → Widgets and adding any of the filters beginning with ‘Product Table’ to your sidebar. The filter widgets will appear on your product catalog pages, but won’t affect the rest of your website:
How to create a read-only product catalog & disable online ordering
So far, I’ve shown you how to create a WooCommerce product catalog table that functions as an online order form. If you prefer, you can use it to list products without online ordering. There are 2 ways to do this:
Option 1 – Create a read-only product table
To create a read-only product table, simply make the following changes:
- Remove the ‘add-to-cart’ column from the WooCommerce Product Table shortcode.
- Disable the links to the single product page.
Option 2 – Use YITH WooCommerce Catalog Mode plugin
Alternatively, you can use the free YITH WooCommerce Catalog Mode plugin to automatically disable the ability to buy online. Please see our separate article for full details on using the 2 WooCommerce product catalog plugins together.
Whichever option you choose, customers will be able to view your products in the catalog but there’ll be no way for them to add products to the cart or buy online:
Using your WooCommerce Product Catalog
Have a play with your WooCommerce catalog, or the catalog page on the plugin demo site.
As you can see, your customers can do many different things with the WooCommerce product catalog. They can click on a title to view the actual product page (this link can be disabled if needed – see knowledge base). They can click on a product category or tag to filter by that category. Then they can use the search box to find products.
Customers can also click on the column headers to order your products by that column – for example, to sort by price.
Once they’ve chosen their products, they can easily add them to the cart and buy online. Or if you’ve disabled online ordering in WooCommerce, they can take whatever other actions you desire, such as phoning you to place an order.
Easily create the ultimate product catalog
In this tutorial, I have shown you how to create an interactive WooCommerce product catalog table. While the example I’ve given shows a popular use case, it may not meet your needs exactly. With almost 2 million websites using WooCommerce according to the latest stats, lots of sites need different types of product catalog.
Don’t worry, WooCommerce Product Table comes with many more options to refine your ultimate product catalog. For example, you can control how your table is ordered by default, and how may rows appear per page. You can let customers select quantities and variations directly from the WooCommerce product catalog view. Or even add-on options, if you’re using Product Table with the official Product Add-Ons plugin. You can control the responsive options and how the catalog behaves on different screen sizes.
The WooCommerce Product Table plugin knowledge base contains full details of what you can do with this simple but powerful plugin. In no time, you can create the ultimate product catalog to attract your customers and increase your sales.