Use WooCommerce Product Table & Quick View in Catalog Mode
WooCommerce Product Table is one of the most popular WordPress plugins for creating a WooCommerce catalog-style layout. WooCommerce Quick View Pro adds quick view lightboxes to speed up the buying process. Today, I’m going to tell you about an integration that lets you disable online ordering – putting your store into read-only catalog mode.
You can do this by using WooCommerce Product Table and/or Quick View with a popular WordPress catalog plugin – YITH WooCommerce Catalog Mode. I’ll tell you about each WooCommerce plugin and why you might want them. Then, I’ll tell you how to use them together to create WooCommerce tables in catalog mode with quick view. Let’s get started!
What is the WooCommerce Product Table catalog plugin?
WooCommerce Product Table is our bestselling WordPress plugin. It lists the products from your WooCommerce store in a user-friendly catalog layout. It’s very flexible and you can choose which columns to include in the catalog view, and much more.
WooCommerce Product Table is ideal for creating a product catalog because it lists products in a compact list view. This provides similar experience to reading a traditional printed catalog. Customers can see more information on each page. They can quickly search, sort and filter the table to find the products they need. A product catalog layout is particularly useful if you have a large number of products, as it saves customers time.
As you can see, WooCommerce Product Table has options to include add to cart buttons so that people can buy directly from the table. If you don’t want customers to order online, then you can achieve catalog mode simply by disabling the links to the single product page and removing the add to cart column from your product tables. And, there’s no need for custom HTML or CSS code.
For a more fully featured catalog mode plugin, you can combine Product Table with YITH WooCommerce Catalog Mode. You’ll need this if you want people to be able to access the product detail page, but without add to cart buttons.
What is WooCommerce Quick View?
WooCommerce Quick View Pro lets customers learn more about your products and add products to the cart more easily, without having to visit the single product page.
You can use it to add quick view buttons to the default WooCommerce shop and category pages.
Or alternatively, you can use it to add quick view to your product tables (if you’re using WooCommerce Product Table).
Either way, WooCommerce Quick View Pro is fully compatible with the catalog mode plugin that I’m going to tell you about next.
What is YITH WooCommerce Catalog Mode?
This WordPress catalog plugin disables the ability for customers to order from your WooCommerce store. Your products are listed in catalog-only format, without the usual e-commerce functions.
For example, you might want to disable online ordering if customers can only buy from you in person or over the phone.
There’s a free version that you can install. The premium version of the plugin has extra features to build on the WooCommerce catalog mode.
How to use product tables with YITH WooCommerce Catalog Mode
WooCommerce Product Table and YITH WooCommerce Catalog Mode work seamlessly together. You can use the product table plugin to create a dynamic, front-end catalog view of your products and the YITH WooCommerce Catalog Mode plugin to disable ordering features.
For this tutorial, we’ll assume you already have WooCommerce Product Table and YITH WooCommerce Catalog Mode (free version) installed and activated on your WordPress website. Here’s what you need to do next:
Step #1: Configure YITH WooCommerce Catalog Mode settings
Once you’ve activated the YITH WooCommerce Catalog Mode plugin, head over to YITH > Catalog Mode from the admin panel. From the Settings tab, configure the following plugin settings:
- Make sure the checkbox next to Enable YITH WooCommerce Catalog Mode is ticked.
- Tick the checkbox next to the Hide in product detail page option.
- Tick the checkbox next to the Hide in other shop pages option.
- Optionally, you can choose to tick the checkbox next to the Hide and disable “Cart” page, “Checkout” page and all “Add to Cart” buttons This essentially lets you remove e-commerce features (i.e. cart and checkout pages) from your WooCommerce store.
Click the Save Changes button to continue.
Step #2: Configure WooCommerce Product Table settings
Head over to WooCommerce > Settings > Products > Product tables and scroll down till you reach the Table content section on the settings page.
In the Columns option, make sure to not add the add to cart column. This is because we want to create a product catalog without cart buttons or e-commerce features. You can use other columns instead, such as image, name, description, reviews, and price. For this, you would simply add image,name,description,reviews,price to the Columns option. If you’d like to hide prices from the front-end, leave out the price column.
Click the Save changes button at the bottom of the screen to continue.
Note: If you include an add to cart column in the product table, customers will see an error message if they try to use the Add to Cart button to add products to their shopping cart.
The key benefit here is that customers can view important product information – including product name, description, and reviews – at a glance. The product table also lets them:
- Search for specific products.
- Sort by columns.
- Filter by product categories, tags, attributes or custom taxonomies.
For further information, they can simply click through to the single product page. You can use the product table plugin to display custom buttons (such as Learn More buttons or Request a Quote buttons) that take customers to single product pages or your contact form.
Additionally, you can use advanced settings to display specific products (or specific product categories) only in the table layout. It also gives you the option to create an exclusion list for products or an exclusion list for product categories.
Step #3: Create a new page for the product catalog
Finally, go to Pages > Add New to create a new page for your product catalog. Add the shortcode
[product_table] to the WordPress text editor. Alternatively, you can use the Insert Product Table dashicon from the text editor toolbar to insert the shortcode.
Click the Publish button and preview the product catalog on the front-end. Depending on the WordPress theme you’re using, the WooCommerce Product Table plugin will generate a catalog-style table layout that looks something like this screenshot:
This way, customers can see your WooCommerce products listed in catalog mode, without an option to buy. Once they click on a product, they will be redirected to the single product page. Alternatively, you can choose to redirect them to a custom URL.
The YITH plugin automatically removes all add to cart buttons from single product pages. What this means is that customers won’t have the option to add products to cart from the product table or from the single product page. However, they can view all product details from individual product pages.
This is especially useful for stores and e-commerce sites that want customers to:
- Create a wishlist or gift registry.
- Place orders over the phone or Skype.
- Purchase products from their retail store.
- Use the contact form (or an inquiry form) to request a quote. You can use Gravity Forms to create all sorts of forms that work seamlessly with the WooCommerce catalog mode plugin and WooCommerce Product Table.
The great thing about the WooCommerce Product Table plugin is that it’s incredibly flexible and you don’t need to mess around with any HTML or CSS code. For example, if you want to create a catalogue mode for specific user roles only, you can pair it up with the WooCommerce Private Store plugin. You can use this to hide product price and add to cart option from, say, unregistered users.
How to use quick view with YITH WooCommerce Catalog Mode
WooCommerce Quick View Pro works perfectly with YITH WooCommerce Catalog Mode. There’s no need for any extra setup instructions. Simply install both plugins as usual. Once you have enabled catalog mode using the YITH plugin, the add to cart buttons will no longer appear in the quick view lightbox.
It’s time to get started!
Used together, these plugins provide everything you might need for a WooCommerce catalog. WooCommerce Product Table lists products in a catalog-style layout, with search and filters to quickly help customers find what they need. WooCommerce Quick View Pro provides extra information and speeds up the buying process even further. The YITH WooCommerce Catalog plugin disables online ordering for some or all of your products, putting them into read-only catalog mode.
I’d love to hear how you use WooCommerce product tables and/or quick view with catalog mode. Please tell me about your website in the comments below.