WooCommerce Product Catalogue Tutorial
Discover the easy way to create a WooCommerce product catalogue. Ideal for large product directories, your products will be listed in a searchable table with filters. You can create a read-only catalogue, or an order form with Add to Cart buttons.
This tutorial will teach you how to create a WooCommerce product catalogue 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.
It’s perfect if you want a larger WooCommerce product catalogue. For example, you might have 100’s or 1,000’s of WooCommerce products. You might want to display more products per page so that your customers can see them all together. A catalogue layout makes this possible.
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 that customers can view more products per page. Typically, a product catalogue will include features to make it easier for customers to find specific products. This might include 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 the WooCommerce product catalogue have?
The WooCommerce product catalogue plugin lets you list 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 catalogue is displayed and how customers interact with it. For example, you can add filter dropdowns for category, tag, attributes, variations, custom taxonomies, etc. above the table. You can add sidebar widgets to filter by attribute, price or rating. You can show or hide elements such as the search box. There are even options to control how the responsive product catalogue behaves on mobiles.
You can either have a single product catalogue page listing all your WooCommerce products. Or, you can divide catalogue into sections, with separate tables for products with specific categories, tags, custom field values, etc.
How to create a WooCommerce product catalogue
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 your WooCommerce product catalogue.
1. Create a page for the product catalogue
First, create a new page for the product catalogue by going to Pages > Add New in the WordPress admin. Call the page whatever you want, for example ‘Product Catalogue’.
2. Enter the default WooCommerce Product Table shortcode
Now, enter the WooCommerce Product Table shortcode which will create a table displaying the product catalogue. This shortcode will list your WooCommerce products as a searchable, sortable table.
Publish the page and click ‘View Page’ to see your WooCommerce product catalogue.
You’ll see a dynamic catalogue listing all your WooCommerce products. It’s currently using the default column headers which may or may not be relevant to your product catalogue. These are product name, short description, price and add to cart button:
3. Choose which columns appear in the WooCommerce product catalogue
Next I’m going to show you how to choose which product data to include. This will make the table more suitable as a WooCommerce product catalogue.
Go back to the Edit Page screen for your product catalogue. It’s time to make some changes to the WooCommerce Product Table shortcode to control which columns are displayed in the catalogue. Try replacing the default shortcode with this:
This adds a ‘columns’ parameter to the shortcode. I have added the following columns:
- sku – the unique identifier for the product. You may not want this, but a lot of product catalogues include a product code or ID.
- name – the main title for your product.
- description – the long description for the WooCommerce product.
- categories – this tells the catalogue 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 catalogue to include a column for the ‘size’ attribute. Use this format for any product attributes you wish to include in the catalogue. 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 catalogue or hide column headings.
Now Update and View your page. The table is now much more useful as a WooCommerce product catalogue. The 7 columns relate to the columns that we listed in the product table shortcode:
Add filters to the WooCommerce product catalogue
Another neat option in WooCommerce Product Table is the ability to add filter dropdowns and widgets to your product catalogue.
WooCommerce catalogue 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 catalogue view.
WooCommerce product filter widgets
The product catalogue 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.
You can add any of these filters by going to Appearance > Widgets and adding the filters beginning with ‘Product Table’ to your sidebar. Make sure your product catalogue is on a page that contains the product table shortcode and has a sidebar area (e.g. left or right column). The filter widgets will appear on your product catalogue pages, but won’t affect the rest of your website.
How to create a read-only product catalogue & disable online ordering
So far, I’ve shown you how to create a WooCommerce product catalogue that functions as an online order form. If you prefer, you can use it to list products in a read-only catalogue without online ordering. There are 2 ways to do this:
Option 1 – Create a Read-Only Product Table
To do this, you need to 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 of using the 2 WooCommerce product catalog plugins together.
Whichever option you choose, customers will be able to view your products in the catalogue. However, there will be no way to add them to the cart or buy online.
Using your WooCommerce Product Catalogue
Have a play with your WooCommerce catalogue, or the catalogue page on the plugin demo site.
As you can see, customers can do many different things with the WooCommerce product catalogue. They can click on a title to view the actual product page. (This link can be disabled if needed – see knowledge base). You can click on a product category or tag to filter by that category. Then you can use the search box to find products.
Customers can also sort 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.
Refining your WooCommerce product catalogue
In this tutorial, I have shown you how to create an interactive WooCommerce product catalogue. The example I have given shows a popular use case but 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 catalogue.
WooCommerce Product Table comes with many more options to refine your product catalogue. 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 catalogue view. (Or even add-on options, if you’re using Product Table with the official Product Add-Ons plugin.) You can even control the responsive options and how the catalogue 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. Use these to create a unique product catalogue that will attract your customers and increase your sales.
You can buy WooCommerce Product Table at https://barn2.co.uk/wordpress-plugins/woocommerce-product-table. And if you like our plugin, become an affiliate and get paid for recommending it!