WooCommerce catalog: Build a product table with or without online purchasing
Discover the easy way to create a table-based WooCommerce catalog. Ideal for large product directories, your products will be listed in a searchable table with filters.
This tutorial will tell you how to create your own e-commerce order form complete with variation pickers and add to cart buttons or checkboxes.
You’ll also learn how to combine product tables with WooCommerce catalog mode, disabling the e-commerce functionality.
Whatever type of WooCommerce catalog you need to build, I’ll teach you how to create the ultimate product catalog using the bestselling Product Table plugin, without the need for any custom PHP or CSS.
A WooCommerce catalog 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 catalog layout displays products in a neater and more compact way to the default Woo store layout.
A catalog 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 WC product catalog table, for example, you might have 100s or 1,000s of WooCommerce products.
Who needs a WooCommerce catalog plugin?
A WooCommerce product catalog 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 catalog will include features to make it easier for customers to find specific products, including keyword search, filters or sort options.
Product catalog layouts have many possible uses, such as:
- WooCommerce order form – Your product catalog 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 catalog.
- WooCommerce restaurant food ordering system – A restaurant or takeaway business can use the product catalog plugin to let people view menus and order food online.
- Product directory – A product catalog can also function as a complete WooCommerce directory, with large numbers of products listed in an easy-to-find format.
- WooCommerce wholesale catalog – WooCommerce Product Table is hugely popular for wholesale catalogs. List all your wholesale products in a structured catalog layout to help trade users quickly find and order their products. You can use it with our other WooCommerce plugin, WooCommerce Protected Categories, to create a hidden wholesale area separate from your public shop page. You’ll be able to certain user roles or by having users enter a password.
Would you rather create a simple product list view? Check out our other tutorial on creating WooCommerce product lists.
What features can a WooCommerce catalog table have?
E-commerce order form or catalog mode?
The best product catalog WordPress plugins give you a choice of whether or not to accept orders online. This gives you two options:
- You might want to include full purchase functionality in the product catalog layout, with quantity pickers, variation dropdowns, add to cart buttons, etc.
- Alternatively, you might want to put your store in read-only ‘catalog’ mode, disabling the e-commerce features. With this use case, you can still list individual products in a catalog-style table view, but this is for read-only purposes and customers can’t make a purchase. You could use a contact form plugin to create an inquiry form that interested visitors can fill out to request a quote or start a purchase.
Keep reading to learn how to create a WooCommerce catalog view with both options.
Flexible information to display in the catalog view
The WooCommerce catalog plugin lets you create the ultimate product catalog, listing various product details, including columns for:
- Product name
- Short or long description
- Add to cart button (with or without quantity selector and product variations. You can also choose whether or not to use the Ajax add to cart functionality)
- Product image
- Product prices
- 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 mobile devices.
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.
Use WooCommerce Quick View to provide extra product information
When you use WooCommerce Product Table to create a catalog of your products, you can choose which columns of information to include. But what if you want to display multiple product images, or extra information that won’t fit in the catalog? That’s when you need to add quick view to your catalog.
The WooCommerce Quick View Pro plugin is designed to work with WooCommerce Product Table. It adds quick view buttons or links to the catalog, so that customers can open extra information and purchase from a lightbox instead of directly on the catalog page.
This is an excellent compromise because it keeps customers on the catalog page and doesn’t take them to a separate page for each product. However, it lets you provide extra images, a longer product description, more data about each product, and you can also let them select variations from the quick view.
Case study – Wavelength Electronics’ table-based product catalog
Wavelength Electronics sell technical products in the electronics industry. The website uses our WooCommerce Product Table plugin to create detailed product comparison tables for each product category.
The website acts as a catalog for customers to compare products. The product table needed to display a lot of technical information so they created WooCommerce custom fields to display the extra data. They also included ticks and PDF icons with links to downloadable data sheets. By using the filter dropdowns, it couldn’t be simpler to compare several different products all at once.
Carry on reading to find out how you can create your own WooCommerce product catalog.
How to create the ultimate product catalog
First, I’ll show you how to list products in a table-based catalog. This is all about the layout, and doesn’t affect whether or not people can purchase your products (although as you’ll see, you can do this by choosing not to include an add to cart column in the table). If you want to fully disable the e-commerce side of things and prevent people from purchasing, skip ahead to the section on catalog mode.
To get started, your website should have 2 plugins installed:
- WooCommerce (free – download from the WordPress plugin repository)
- WooCommerce Product Table (purchase premium version here)
You can then follow these instructions to create the ultimate product catalog.
1. Create a page for the WooCommerce 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 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:
By default, the plugin displays all of your products, but you can also add an inclusion or exclusion list to control which products display or add related products. Learn more here.
3. Choose which columns appear in the WooCommerce 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 catalog table or hide column headings.
If you want your products to be purchasable from the catalog page, then you’ll also want to include an add-to-cart column. Use the knowledge base to learn how to add quantity pickers, variation dropdowns, and other purchase options.
Now view your product catalog
Now Update and View your page. You’ll see the table is now a very useful WooCommerce catalog and the 7 columns are those we listed in the product table shortcode.
Example without online purchasing:
Example with online purchasing:
4. Add filters to the WooCommerce 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 add quick view to your WooCommerce catalog
Earlier, we learned how you can improve your WooCommerce product catalog by adding a quick view plugin. If you’d like customers to be able to view extra information and/or buy products from a lightbox popup, this is how to do it:
- Install and activate WooCommerce Quick View Pro via Plugins → Add New in the WordPress admin.
- Go to WooCommerce → Settings → Products → Quick view and activate your license key.
- Choose all the settings for your quick view lightboxes.
- Go to WooCommerce → Settings → Products → Product tables and add a
It’s also possible to open the quick view by clicking on the product name or image in the catalog.
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, with or without an add to cart column. 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.
You can also add a custom button to link people to a contact form or inquiry form if you want – just make sure to enable HTML processing in your WooCommerce catalog.
This option is ok, but people might still access the single product page through the back door. And the single product page will contain add to cart buttons. If you need a more robust catalog mode solution, use Option 2 instead.
Option 2 – Use WooCommerce Catalog Visibility Options
WooCommerce Product Table works beautifully with the official Catalog Visibility Options extension. This great plugin lets you hide the price and/or add to cart buttons throughout your WooCommerce store, including the product table catalog page.
Install Catalog Visibility Options and go to the settings page: WooCommerce → Settings → Visibility Options. Here are some notes on how the different settings affect the content of your product tables:
Use this option to enable online purchasing, disable it, or enable it for logged in users only.
If you’re using the ‘Logged in users’ option, then you might want to include an add to cart column in the product table. If you do this, then it works best if you use add to cart buttons instead of checkboxes. (This is an option on the WooCommerce Product Table settings page.) The buttons simply don’t appear for users where purchasing is disabled. Other elements such as quantity pickers disappear too – nice!
It’s worth noting that variation dropdowns still appear even when Purchases are disabled. This is because the variations are listed for information only, and can’t be purchased. If you don’t want this, then you can disable the variation dropdowns in WooCommerce Product Table.
Finally, tick this to hide the Prices from the product catalog page. Again, you can hide prices for everyone, no one, or just logged out user/guests.
If you hide the price, then the ‘Price’ column in WooCommerce Product Table will appear blank. This might make sense if you want to show prices to logged in users. If you want to hide the price from everyone, then I suggest removing this column from your product tables.
Alternate text options
You’ll also see 3 settings where you can add different messages to display when content is hidden. These are: Catalog Add to Cart Button Text, Catalog Price Text, and Alternate Content.
These all work correctly in the product table, and you can see them in the screenshot above. If you don’t add anything to these fields, then they will appear blank in the product table.
Disable caching in WooCommerce Product Table
If you get any problems, make sure you disable the caching option in WooCommerce Product Table. If you’re showing different pricing/purchase information to different types of user, then the table needs to be loaded fresh for each person. Caching will interfere with this, so disable it on the product table plugin settings page.
Option 3 – Use YITH WooCommerce Catalog Mode plugin
Alternatively, you can use a free plugin named YITH WooCommerce Catalog Mode from YITH Plugins 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 use your checkout pages:
Using your WooCommerce 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 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 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 catalogs.
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 many rows appear per page. You can let customers select quantities and variations directly from the WooCommerce product catalog view. You can add quick view lightboxes. 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.
You can now click here to buy WooCommerce Product Table.