Create a WooCommerce Grid or List View with the Product Table Plugin

By Updated: March 11, 2019

WooCommerce order form plugin demoDo you need to create a WooCommerce grid / list view for your store? If so, you’ve come to the right place.

I’m going to tell you how to use the bestselling WooCommerce Product Table plugin to create a grid or list view of your products. I’ll tell you how it can make your store more user-friendly and improve your conversion rate.

I’ll also provide full step-by-step instructions on how to create your very own WooCommerce grid/list view.

WooCommerce Product Table
Create a grid or list view on your site today!

Why do I need a WooCommerce grid/list view plugin?

Default layout without WooCommerce gridWhen you create a fresh WordPress/WooCommerce install and add a theme, your store will come with some fairly standard built-in layouts. Your products will be listed in a default layout with approx. 3 products on each row, large product images, and some basic data such as name and price. There will be an add to cart button but no extras such as quantity arrows or variation dropdowns. Each product will take up quite a bit of the page because of the large images and extra space between each row.

Some types of product lend themselves perfect to this default store layout. However, others don’t sell well in this way.

When you set up WooCommerce, it’s important to think about the best way to present the types of products you’re actually selling. Don’t just stick with the layout that comes with your WordPress theme.

Many types of products sell better when listed in a tabular WooCommerce grid/list view. With this type of store layout, products are listed in a space-saving table layout. The table takes the form of a grid view, with each product taking up 1 row of the table, and multiple columns showing different types of product data.

You may also like: How to create a WooCommerce product list view with extra columns of data.

Benefits of a product grid or list view

WooCommerce grid list view plugin

While you’re reading this, I expect that you’ve already started thinking of ways a WooCommerce grid or list view can boost your sales. Here are some of the main reasons:

More products per page

A WooCommerce grid view plugin lists products in a way that takes up significantly less space per product. This means that customers can see more products at a time. They don’t have to scroll as much or click to multiple pages. This helps them to find and buy products more quickly, boosting your conversion rate.

More product data directly in the grid/list view

When you discover that a list view plugin uses less space per product, you might assume that it contains less information about each product. Surprisingly, the opposite is actually true!

By listing products in a space-saving table, each product takes up a small amount of space. But the extra columns in the grid let you display extra product data, all within the table view.

You can see how this works in the screenshots below. As you can see, the default store layout displays just 3 products in the same space as the WooCommerce grid/list view shows 6! Yet the table layout contains columns for extra data, quantity and variation options which aren’t available in the basic layout. It’s a win-win, for both you and your customers!

WooCommerce grid product order form layout

Order form functionality

When you use WooCommerce Product Table to create a grid or list view, you can just list products with links to the single product page. If you prefer, you can even disable the links and use it to create a read-only product catalog.

But for many stores, the best way to grow your sales is to use the product grid/list view to use it as a one-page WooCommerce order form. An order form layout puts ALL the information that customers need to buy on a single page. There are extra columns of information to allow customers to make buying decisions. And once they’ve chosen, they can quickly select the products they require, choose variation options and quantities, and add them to the cart.

By adding these extra purchasing elements, you can transform a basic product grid or list view into a fully functional WooCommerce order form. The entire ordering process is kept on a single page, which significantly speeds up the buying process. And research shows that the quicker the buying process, the more sales you’ll get!

Related: 10 ways a product table view can improve your WooCommerce conversion rate.

What types of products sell better in a list or grid layout?

Like I said, some products sell best in a grid/list view, while others don’t. You need to think about the types of products on your store. Decide whether this type of plugin will boost your own sales.

Here are some examples of products that work well when listed in a WooCommerce table view:

  • Non-visual products such as car parts – Lots of WooCommerce stores sell products where data is more important than what the product looks like. If you’re selling something like car parts where looks aren’t important, then it’s much better to list products in a compact grid or list view. Sure, you might have a small thumbnail image of each product (although this isn’t essential). But you certainly shouldn’t use the huge images that come with the standard store layout.
  • Industry-specific products such as restaurant foods – Some types of product sell best when displayed in a specific way, based on customer expectations. For example, a restaurant online ordering system is most effective when the foods are presented in a way that mimics the layout of a printed restaurant menu. The best way to achieve this is via a web page with separate product tables for starters, main courses and desserts, with quick tick boxes for customers to select foods and order online.
  • All wholesale products – If you’re building a WooCommerce wholesale store, then a product list/grid view will nearly always be better than the standard layout. That’s because by definition, wholesale users are regular customers and are already familiar with your products. They don’t need large pictures to help them make buying decisions. Instead, they need factual information and a fast buying process. A WooCommerce wholesale order form listing your products is exactly what trade users need.

What products aren’t suited to a WooCommerce grid/list view plugin?

I would say that clothes and furniture are examples of products that aren’t suited to a WooCommerce grid/list plugin. For something like clothes or furniture, customers need to see big images of each product. After all, they’re buying based on what the product looks like!

Are your products similar to the examples listed above, where space and factual information are the priority. Or are they more like clothes or furniture, where large images are what matters?

Perhaps you have some products that you’d like to list in a tabular grid layout, and others where you’d prefer the built-in store layouts. That’s absolutely fine, as you can use both in different parts of your store.

Keep reading to learn how to set it up.

How to create a WooCommerce grid or list view

By now, you should have decided whether your products will sell well in a table-based list view. Next, I’ll tell you how to use the WooCommerce Product Table plugin to create a grid or list view for some or all of your products.

  1. First, get WooCommerce Product Table and install it on your WordPress site.
  2. Next, go to WooCommerce > Settings > Products > Product tables. Add your license key (you’ll find this in your confirmation email). Then look through all the settings and choose the default options for your product tables. Use the knowledge base links for guidance on how to choose which columns of data to include in the product grid view, add filters above the table, etc.
  3. Next, create a new page where you want to display products in a WooCommerce grid or list view.
  4. Add a shortcode to your page: [product_table]
  5. If you want to list all your products on a single page, skip to step 6. To list specific products only in the table grid, use these instructions to select products based on their category, tag or other data.
  6. Finally, publish and View the page.

You’ll see your products beautifully displayed in a WooCommerce product grid/list view with the options you selected on the plugin settings page. Read through the full list of product table options and tweak the product grid until you’re completely happy.

Can I import products to the grid view?

As you can see, it’s pretty easy to list your existing WooCommerce products in a grid/list view. The neat thing is that WooCommerce Product Table takes the products already in the WordPress database and instantly lists them in a table layout. There’s no extra data entry for you to do.

This means that if you haven’t already added your products, you can import them using the built-in WordPress/WooCommerce importer or any CSV import plugin. This is a handy way to bulk import products to your site.

How to add a product grid or list view to the main shop and category pages

In the above instructions, I told you how to list products in a grid-based table view on any page. This is a handy way to list some products in a table, while still using the built-in WooCommerce layout for other products.

If you prefer, you can add the product table layout directly to the template files in your theme. This will replace the standard layout throughout your store. For example, it changes the layout on the main WooCommerce shop page, product category archives, etc. The benefit is that the WooCommerce grid/list view will be used whenever someone accesses any pages in your store. You don’t have to add any shortcodes to your site or specify which products to list on each page.

The method for doing this is slightly more technical, as you actually have to modify template files in your theme. There are instructions on how to do this in the plugin knowledge base.

Add quick view to the list of WooCommerce products

WooCommerce Quick View Plugin Build Your Own Product

Sometimes, you’ll find that you want to show extra information about each product but don’t want to take shoppers away from the grid/list view. You might also have too many variations to list directly in the grid of products. This is a valid concern, because customers will buy more from you if they remain on the list of products and don’t get lost on individual product pages.

WooCommerce Product Table Quick View Magnifying GlassThe solution is to use WooCommerce Product Table with WooCommerce Quick View Pro. This adds user-friendly ‘quick view’ buttons to the list of products. Customers can click on these to view extra product images, more information and even choose variations and add to the cart from a quick view lightbox.

It’s the perfect compromise because you can show information that wouldn’t fit in the product table; without taking customers to a separate page.


Wrapping up

A WooCommerce grid or list view plugin like WooCommerce Product Table isn’t for everyone. Consider the type of products in your store, and whether displaying them in this layout will improve customer experience.

For less visual products, listing items in a compact table layout with extra information can make a huge difference to sales. Get the plugin, follow the instructions to set it up, and improve your store layouts today.

WooCommerce Product Table
Create a grid or list view on your site today!

Katie Keith

An active member of the global WordPress community, Barn2 Co-Founder Katie loves collaborating with other plugin companies. Her articles have been published on high profile sites including WPTavern, Torque and IndieHackers. She oversees all plugin support and deals with 'Tier 2' support requests about how to use Barn2's plugins in advanced ways.

Please share your thoughts...

Your email address will not be published.