How to Add a WooCommerce Related Products Table to Your Site (In 3 Steps)

April 7, 2020 4 comments

WooCommerce related products are a quick and easy way to boost sales. Whether your online store is brand new, or you’ve been a retailer for a while and are looking to expand, increasing revenue is probably on your mind.

However, with so many marketing strategies to choose from, it’s hard to choose which ones to prioritize. By adding related products tables to your single product pages and other key areas of your site, you can start increasing revenue and free up time to work on other marketing techniques.

WooCommerce related products table plugin

In this post, we’ll explain what related products are and why they’re useful. Then we’ll show you 2 ways to add WooCommerce related products tables to your site. Let’s dive right in!

Related products are simply items in your store that are either upgrades or additions to other products. For example, if you sell bicycles, related products might include helmets, baskets, or even other bicycles with more advanced features.

Displaying related products on your site is useful for a few reasons. First, it’s helpful for your customers. Related products can point them towards items they may need to supplement their purchases, but wouldn’t have thought about on their own.

You can also use related products to cross-sell, by promoting items customers can use with the products they’re already interested in. Similarly, you can up-sell your visitors – promoting more expensive versions of lower-tier products. Both of these strategies can help increase revenue significantly.

Today, I’m going to tell you about 2 WooCommerce related products plugins that make it easy to list products anywhere on your store:

  1. WooCommerce Product Table Provides an easy way to list related products in a table on any WordPress WooCommerce site. It generates customizable tables, which you can configure to list specific products of your choosing anywhere on your site – for example, within pages or posts. (Jump to Method 1)

  2. WooCommerce Quick View Pro When used with one of the built-in WooCommerce shortcodes, this plugins allows you to list products anywhere on your site complete with quick view buttons. (Jump to Method 2)
    WooCommerce Quick View Pro Cropped

WooCommerce Product Table automatically generates a table that lists some or all the products on your site. You can use it to create quick tables or order forms that list WooCommerce related products.

WooCommerce Product Table
An easy-to-use plugin for listing WooCommerce related products.

For example, you can add your WooCommerce related product tables to individual product pages – as First Kitchens does for its replacement cabinet doors:

A product table on the First Kitchens website.

The owner of First Kitchens, Seth Alling, says:

Just what I needed
By Seth Alling
WooCommerce Product Table is a great plugin. I had a request from a client for multiple WooCommerce product tables to be displayed on their site, and I was planning on building one to suit my needs. Unfortunately, due to a tight deadline, I knew I wouldn't have time to develop it. The setup is easy and the documentation is straightforward. The best part is that each time I realized I needed something custom depending on the table, this plugin already supported the customization.

You can add the tables anywhere you like – product pages, normal WP pages, blog posts, and more.

Let’s take a closer look at how you can list related products on your own Woo site.

Check out the WooCommerce Product Table demo!

The steps below will explain how to use WooCommerce Product Table to display related products anywhere on your site. We’ll assume that you already have a WC store up and running.

Step 1: Install and activate the WooCommerce Product Table plugin

The first thing you’ll need is the WooCommerce Product Table related products plugin. You can purchase it on our site, after which you’ll be able to download a .zip file and receive your license key via email.

Get WooCommerce Product Table now!

Then, head over to your WP site. If you navigate to Plugins → Add New, you’ll see a button labeled Upload Plugin at the top of the screen. Click on it, and then select the WooCommerce Product Table .zip file:

Uploading the WooCommerce Product Table plugin.

Once the plugin has finished installing, select the blue Activate button. Then navigate to your Plugins list, and open the WooCommerce Product Table Settings page:

Adding the WooCommerce Product Table license key.

Enter your license key into the first field, then scroll down and click on Save changes. The plugin will now be ready to use.

Step 2: Customize your product table settings

One of the best things about WooCommerce Product Table is that you can customize it fully to meet your specific needs. On the Settings page, you’ll find everything you need to modify your tables’ style, content, performance, and functionality.

Styling your product tables

The first setting you’ll see below the License key field is Table design. Here, you can determine if you’d like to automatically apply your theme’s styling to your related product tables, or generate your own custom look:

The WooCommerce Product Table design settings.

Using your theme’s default styling will help your tables blend in seamlessly, no matter where you list related products in your store. On the other hand, using custom styles will give you complete control over your tables’ colors, fonts, and line widths.

Specifying your tables’ content

The next area of the Settings page is crucial. Here you can specify what information regarding your WooCommerce related products will be visible in your tables. It’s important that you include enough information to entice customers into buying, without overwhelming them.

First, list the columns you want to show in your table of related products. There are several to choose from, including product descriptions, categories, images, prices, Add to Cart buttons, and more:

The WooCommerce Product Table column settings.

Ultimately, it’s up to you what information to include. In most cases, however, a product’s name, short description, image, and price are key details that customers will want to see before making a purchase. Including them in your related products table – along with an Add to Cart button or quick-select checkboxes – will make for a quick purchasing process.

Improving your table’s performance

WooCommerce Product Table’s settings also include options for ‘lazy loading’ and caching, to help prevent your pages from slowing down. Long loading times can cause customers to abandon your site, so enabling these features may help keep them in your store for longer:

The WooCommerce Product Table lazy load settings.

While large amounts of data – such as tables containing lots of related products – normally slow sites down, WooCommerce Product Table is designed to list products without causing your site to drag. So you’re only likely to need this settings if your table includes hundreds or thousands of related products in a single table.

Finally, you may want to consider adding some other features to your tables that will streamline the browsing and purchasing processes for your customers. The next settings enable your customers to sort through the WooCommerce related products, to quickly view ones they’re interested in:

The WooCommerce Product Table sorting settings.

Below that you can modify the Add to Cart column, if you added one in the previous settings. There are a few different features to examine here, but the most important are the Variations and Quantities options:

The WooCommerce Product Table variations and quantities settings.

By including an Add to Cart button as well as variations and quantity selectors, you can turn your WooCommerce related products table into a miniature order form. This is a smart way to improve your chances of successful cross-selling, as it enables customers to add related products to their carts without leaving the current page. It’s also a great option if you want to list variations instead of actual related products.

Finally, take a look at the Table controls settings:

The WooCommerce Product Table table controls settings.

These options enable customers to filter and search your tables, to easily find items they’re looking for. If you’re just listing a few related products in each table, we recommend hiding elements such as ‘Page length’, ‘Search box’ and ‘Product totals’, which are more suited to larger tables.

When you’re done, remember to save your changes to the related products plugin settings page.

With the WooCommerce Product Table settings configured, you’re now ready to add your related products tables to your site. First, you’ll have to decide where you want to list related products:

  • Individual product pages are an ideal spot, for example the short or long description fields.
  • Alternatively, you can add tables anywhere with a simple shortcode. Add them to normal pages, blog posts, widgets, and more.

Normally, you’ll generate product tables by adding this shortcode anywhere on your site:

[product_table]

By default, this will generate a table of every single product on your site – not just related products. Instead, you can use categories, tags, product attributes, or custom fields to specify which products should be listed.

To do that, you’ll need to add a qualifier to the shortcode. Choose which of these methods you want to use to select related products, and then use the corresponding shortcode (replacing “example” with the slug or ID of your category/tax/attribute):

  • To list products from a single category, use [product_table category="example"].
  • This shortcode lists all products with the same tag: [product_table tag="example"].
  • You can include all products with a specific attribute, using [product_table term="pa_attribute:example"].
  • If you want to list products from custom fields, you can add[product_table cf="field name:field value"]

If you want even more control over which items appear in your related products tables, you can list individual product IDs. First find the ID number of each product you want to list, and then use this shortcode:

[product_table include="1,2,3"].

Be sure to separate each ID number with a comma, but no spaces. This is a particularly handy feature, since most other WooCommerce related products plugins only let you list items by category, tag, or product attribute. With this option, you can fully customize which related products are listed in each table.

By listing your WooCommerce related products in product tables, you can show extra data about each product by choosing which columns to include. You can also configure the add to cart column to include quantity arrows and variation options.

But what if you want to show more information than you can realistically fit in the product table? Typically, you want people to add related products to the cart without leaving the current page. After all, you still want them to buy the product they’re currently viewing! Quick view is the solution.

WooCommerce Product Table Quick View Magnifying Glass
WooCommerce Quick View Pro is WooCommerce’s Product Table’s sister plugin. It adds quick view buttons or links to the product table, allowing customers to learn more about each related product from a quick view lightbox. There’s no need to leave the current page, and they can choose variations and add to the cart directly from the lightbox window.

It’s the perfect way to increase your sales of related products.

Now you’ve finished, have a look at your WooCommerce related products table. Tweak the settings until it’s just right.

Your finished table should look something like this example. This screenshot lists related products in a 2-column layout within the main product description of a variable product:

WooCommerce Related Products Plugin

So far, we’ve talked about how to use WooCommerce Product Table to create a table or order form listing related products anywhere in your store. The table layout is ideal for many types of products – but what if you want to list products in a grid layout instead?

You can do this by using the WooCommerce Quick View Pro plugin with one of the shortcodes that comes with WooCommerce itself:

  • The shortcode lets you list specific products anywhere on your site, for example in a blog post.
  • WooCommerce Quick View Pro adds quick view buttons to the related products. Customers can use these to view more information and add to the cart from a quick view lightbox.
WooCommerce product shortcodes for WooCommerce Quick View Pro

Get Quick View

Adding quick view buttons to the default WooCommerce products shortcode is much more user-friendly than expecting people to visit a separate page for each related product. They can view the related product and add it to the cart without getting lost or being taken away to the page or post they were viewing. Everyone wins! 

For full setup instructions, please see our tutorial on how to use the WooCommerce Products shortcode with quick view buttons.

Use Methods 1 and 2 together!

You can use WooCommerce Product Table and WooCommerce Quick View Pro on their own or combine them to get the benefits of both.

For example, for maximum results you can use product tables to list related products, complete with quick view buttons for faster buying!

Where to get the plugins

If you want your online store to succeed, increasing revenue should be a permanent fixture on your list of goals. WooCommerce related products are a simple way to cross-sell and up-sell on your site, without having to put in a lot of extra effort.

WooCommerce Product Table
WooCommerce Quick View
Let customers view extra information and buy related products directly from a quick view lightbox.

Do you have any questions about adding related products to your site? Ask us in the comments section below!

Will Morris

Will Morris is a staff writer at WordCandy. When he's not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.

4 Comments

  1. Simone
    July 22, 2020 Reply

    How can I show related products or upsells? I don't want to intercept them by categories or tags, I want to show the products that I put among the correlated ones or the upsells inside the product. How can I do this?

    • EJ
      July 27, 2020 Reply

      Hi, Simone. Thanks for your comment. Aside from specifying the related products or upsells according to category or tags, you can also display/show them via the other options available at https://barn2.co.uk/kb/wpt-include-exclude/ . Let me know if you have any other questions.

  2. Richard Cook
    October 16, 2019 Reply

    How do you show cross-sells?

    • EJ
      October 17, 2019 Reply

      Hi, Richard. As mentioned in Step 3, you can show cross-sells in a WooCommerce related products table anywhere on your site. You can use categories, tags, product attributes, or custom fields to specify which products are related and should be listed in the table.

Please share your thoughts...

Your email address will not be published.