Until now, there was no easy way to create a WooCommerce product catalog to list products in a neat and compact format.
In this post, I’ll walk you through how to do this using the new WooCommerce Product Table plugin, which was released last week.
What is a WooCommerce Product Catalog?
The term ‘product catalog’ is often used to mean different things. Looking for a suitable WooCommerce plugin can be quite confusing!
Some product catalog plugins (e.g. YITH WooCommerce Catalog Mode, Catalog for WooCommerce and WooCommerce Catalog) disable the ‘Add to Cart’ button so you can’t buy online. This creates a read-only version of your WooCommerce store.
Other plugins create a downloadable PDF catalog of your products. (e.g. PDF Product Catalog for WooCommerce and the official plugin WooCommerce Store Catalog PDF Download.)
For me, a product catalog is a way of listing products in a clear and well-organised format. It should be more compact than the typical WooCommerce category layout that comes with most themes. Customers should be able to scroll through, sort and filter large amounts of information to quickly choose the products they want.
Ideally, a WooCommerce product catalog should also let the customer buy online. Most plugins intentionally disable online ordering and this is the right option for some stores. However, lots of WooCommerce stores want to let customers buy products straight from the catalog view. This is equivalent to the order form in a traditional product catalog.
WooCommerce Product Table lets you display products in a searchable, sortable catalog. You can include an ‘Add to Cart’ button in the catalog so that customers can add products straight to the cart, bypassing the single product page. Or if you prefer, you can hide the ‘Add to Cart’ button and provide the catalog as a read-only product index.
How to Create a WooCommerce Product Catalog
Follow these steps to create a product catalog using WooCommerce Product Table. I’ve provided a video tutorial and step-by-step written instructions below.
#1 – Set Up WooCommerce & Add Products
First, set up your overall website with WooCommerce and add all your products.
There are loads of great resources for setting up WooCommerce, so I won’t repeat it all here. The official WooCommerce documentation is a perfect starting point.
#2 – Use WooCommerce Product Table to Display Products in Catalog Mode
Now it’s time for the fun part – displaying WooCommerce products in catalog view.
To do this, you need to install and activate WooCommerce Product Table. You can then add the following shortcode to any page or post on your WordPress site:
[product_table]
This will create a basic WooCommerce catalog using a product table layout. There are columns for product name, short description, price and Add to Cart button. Customers can browse products, sort the table by clicking on a column, header, type a keyword into the search box or filter by clicking a category name.
If you’re happy with what you see at this point, you can stop reading now! Keep reading to learn how to change the information in your product catalog.
#3 – Customize your WooCommerce Product Catalog
WooCommerce Product Table has many options for configuring your product catalog. The documentation will let you tailor it to your exact requirements.
To get you started, I’ll provide 2 examples of popular use cases for WooCommerce product catalogs. You can see demos of both here.
Product Catalog with Add to Cart buttons
This example lets you create a product catalog that includes a quantity selector and Add to Cart buttons. Customers can add as many products as they like to the cart, straight from the catalog view.
The following shortcode includes columns for featured image, product SKU (popular in product catalogs), short description, categories, tags, price and add to cart button with quantity selector. It’s set to display 10 products per page, sorted in price order.
[product_table columns=”image,sku,name,categories,tags,price,add-to-cart” rows_per_page=”10″ show_quantity=”true” sort_by=”price”]
Information-Only WooCommerce Product Catalog
This example lets you create an information-only product catalog. It will list your products in the catalog without any links to the single product page or Add to Cart buttons. This is a more traditional catalog-style layout.
The following shortcode includes columns for SKU, product name, short description, categories, reviews and price. It’s set to display 20 products per page and all the links have been disabled.
[product_table columns=”sku,name,short-description,categories,reviews,price” rows_per_page=”20″ links=”none”]
Improving Performance for Catalogs with Many Products
It’s worth knowing that by default, WooCommerce Product Table will load all your products at once. This is fine for smaller stores and is needed for some of the extra features such as filtering. However if you have thousands of products then this may cause performance issues on your site.
There’s a lazy load option to speed up the product catalog for WooCommerce stores with lots of products. This means that your product catalog will only load the products on the page you are currently viewing. To activate lazy load, add lazy_load=”true” to the shortcode:
[product_table lazy_load=”true”]
Create Your Product Table!
Now it’s your turn! I’ve given you the knowledge to create an interactive WooCommerce product catalog that will help customers to find your products. You can use your catalog to increase sales or as a supportive sales tool for offline purchases.
I’d love to hear how you use product catalogs for your WooCommerce website. Please leave your comments below and share your tips with other readers.
Hey Katie,
ReplyDeleteThis is really helpful, the way you told. Thanks it will helps me for my WooCommerce Products on makewebbetter.com