WooCommerce catalog: Build a product table with or without online purchasing

WooCommerce Product Catalog Plugin

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.

WooCommerce Product Table Demo

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 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:

  1. You might want to include full purchase functionality in the product catalog layout, with quantity pickers, variation dropdowns, add to cart buttons, etc.
  2. 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
  • Attributes
  • 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
  • SKU
  • Product categories
  • Tags
  • Custom fields (which can include various information. e.g. HTML links, shortcodes from other plugins, images, video, audio players etc.)
  • Custom taxonomies
  • And more
Ultimate product catalogue.

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.

Buy Plugin

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.

GET 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.

Wavelength Electronics Product List

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:

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.

[product_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:

Default WooCommerce product catalogue plugin

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:

[product_table columns="sku,name,description,categories,att:size,tags,price"]

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:

WooCommerce product catalogue WordPress plugin

Example with online purchasing:

A WooCommerce product table with drop-down variations.

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 catalogue plugin with filters
WooCommerce catalog table with dropdown filters.

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:

WooCommerce catalogue plugin
Ultimate product catalog, including dropdown and sidebar filter widgets.

How to add quick view to your WooCommerce catalog

WooCommerce Quick View Magnifying Glass

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:

  1. Install and activate WooCommerce Quick View Pro via Plugins → Add New in the WordPress admin.
  2. Go to WooCommerce → Settings → Products → Quick view and activate your license key.
  3. Choose all the settings for your quick view lightboxes.
  4. Go to WooCommerce → Settings → Products → Product tables and add a quick-view column.

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:

  1. Remove the 'add-to-cart' column from the WooCommerce Product Table shortcode.
  2. 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:

Purchases

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.

Prices

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

WooCommerce Catalog Visibility Table Plugin

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:

Read only ultimate product catalogue.

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.

Discover the top 10 ways to use product tables to improve your WooCommerce catalog's conversion rates. 

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 WooCommerce Product Options 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.

17 Comments

  1. Hi, With using the product table plugin, will the table format apply site wide. Or for different category of products can you have different views. eg some categories you might want as catalogue only, and other categories you might have as the full able to purchase with add to cart.

    Also, what additional plugin do you recommend to run woocommerce as an "add to quote" style site, where the cart when complete then gets emailed so you can price it up.

    • By default, the product table will only appear on pages where you add the shortcode that comes with the plugin. If you prefer, you can use these instructions to automatically use the table layout throughout your store.

      If you want to use the table format on some categories and not others, then the easiest way is to create normal pages for the pages that you want to add tables to. To stop people from using the actual category pages for these categories, you can use the free 'Redirection' plugin to redirect the actual category pages to the page containing the product table for this category.

      Alternatively, you could hire a developer to modify the sample category page template that we provided in the link above so that it only uses the table format on specific categories.

      YITH have provided some code snippets that allow you to use their Add to Quote button with the product table. We've provided a tutorial about this here.

  2. Is it possible to have a column with image "alt" (alternative) text? thanks

    • Hi Frank, unfortunately this isn't possible because the image alt tag is stored against the 'attachment' post type in the Media Library rather than the WooCommerce product, and WooCommerce Product Table only displays information that is directly attached to the product. Instead, I recommend that you create a custom field (e.g. using the free Advanced Custom Fields plugin), manually add the information that you wish to display in the table, and include this as a column in the table instead.

  3. Is it possible to add Pop up link to description and also to custom fields ?
    Because my description text is too long and I want to be in Pop up,

    Also can I add and custom fields with text or some download section ?

    Best regards,

    • Hi, the plugin doesn't have an option to add popup links. However, you can achieve this by adding the code for the popup to your description or custom field. If you add shortcodes="true" to the WooCommerce Product Table shortcode ( e.g. [product_table shortcodes="true"] ), then the product table will correctly render the HTML so your popup will work.

      Yes, you can add anything you like to a custom field - for example a link to download a document. If you add the HTML for the link then this will appear correctly in the table. See this link for instructions.

    • Hi, WooCommerce Product Table has its own version of all the standard WooCommerce widgets. It also has own filters which appear as dropdown lists above the table.

    • Hi Jason, Posts Table Pro displays your products as a standalone table which does not interact with the other WooCommerce functionality such as the search. We are working on a WooCommerce-specific extension to the plugin which will integrate with WooCommerce in a more in-depth way and I will let you know when this is available. (If anyone else is interested in this, please add a comment below and we'll notify you when it is released.)

  4. Can i add a clickable add to cart column after the Price so the customer click on it to purchase the products easily and more quickly?

    Thanks

    • Yes, you can have add to cart buttons. There are 2 options for how to display the buttons including a button for each product only, multi-select check boxes or both.

  5. Can i able to List WooCommerce Products by "Posts Table with Search & Sort" plugin.

    • Posts Table with Search & Sort is our free plugin and only lets you list standard WordPress posts. To list WooCommerce products you need to upgrade to WooCommerce Product Table.

Please share your thoughts...

Your email address will not be published. Required fields are marked *