How to Add a WooCommerce Table of Affiliate Products to Blog Posts
March 7, 2018
If there’s one feature that you’ll find on nearly every single affiliate website, it’s a product comparison table. Seriously – I think a requirement for joining the Amazon Associates affiliate program is that you be able to create product comparison tables – they’re that common.
But despite their ubiquity, most people still laboriously create their product tables using page builders, custom HTML, or an Excel-like table plugin like TablePress.
In this article, I’m going to show you an alternative solution that’s a great option if you’re running an affiliate website powered by WooCommerce.
You’ll learn how to create dynamically generated tables that are searchable, filterable, and sortable. Better yet, you’ll have full control over exactly what information you display in your table of affiliate products.
Not only will this save you time, but it will also make things better for your visitors (and a better experience means more conversions!).
How To Create A Table Of Affiliate Products Using WooCommerce + WooCommerce Product Table
In order for this guide to work, you’re going to need two plugins:
WooCommerce – this is what you’ll use to actually manage your various affiliate products.
WooCommerce Product Table by Barn2- this is what you’ll use to display those affiliate products in a filterable, sortable, and searchable table.
I’m going to assume that you have both of these plugins installed and activated before you start the guide.
Step 1: Add Your Affiliate Products To WooCommerce
Lots of people think WooCommerce is just a solution to sell your own products. But it actually includes core functionality to sell external affiliate products – no tweaking required!
To add your first affiliate product, go to Products → Add New in your dashboard.
The important thing is to find the Product data meta box and change the product type to External/Affiliate:
Then, fill in the information for:
Product URL – this is your affiliate URL that goes directly to the product.
Button text – WooCommerce will display a button to link to where the visitor can purchase the product, rather than an Add to Cart button.
Price – this is not required. And if you’re linking to Amazon, be careful about inputting a static price because it goes against the Amazon Associates policy to have inaccurate pricing (which is likely because of how often Amazon changes prices). For other affiliate programs, you should be fine (make sure to verify this first, though)
Along with the affiliate-specific information, you’ll also want to fill out the general product details like:
Once you publish your affiliate product, you can verify that the product page does indeed display a button with a CTA to buy at an external store:
Now, all you need to do is repeat the same process for as many affiliate products as you want to add.
I recommend using a category or tag to divide up products by topic because it will come in handy later on if you want to create multiple affiliate product tables for different topics.
Step 2: Set Up WooCommerce Product Table Shortcode
In order to display a table of affiliate products, you’ll use the shortcode from the WooCommerce Product Table plugin.
While you can always manually tweak the shortcode on a per-table basis, the plugin lets you set up the default functionality for the shortcode by going to WooCommerce → Settings → Products → Product tables:
But for this post, I’m just going to focus on the settings that most apply to creating a table of affiliate products.
In the Table design area, you can set up a custom design for your table if desired:
Or, you can always stick with the plugin’s default styling.
Moving down a bit, you can choose what information to display as columns in your table. Personally, I think the default configuration is pretty solid. It will display:
Add to cart button (this links directly to the affiliate store)
If you’re not planning to display prices, you might want to remove the price column. Additionally, you might want to remove the short description as it can make your table a little cluttered if you have long descriptions.
Now that you’ve set up the defaults, you can insert your table of affiliate products by using the [ product_table ] shortcode (without the spaces).
The only thing that you need to add to your shortcode is a parameter to indicate which specific products to include (otherwise, the shortcode will display every single product in WooCommerce, which might not be what you want).
To do that, you can either use tag="tag_name" or category="category_name".
For example, here’s what it looks like on my test site when I pull in products that are tagged with “Affiliate”:
And here’s how that looks on the front-end:
A few things to notice in that table to consider when you build your table:
The table will use the button text that you enter when you set up your affiliate product. So you can either make them all the same text or make them different like in my example.
If you don’t input a price, it will show up blank. For that reason, you should probably go “all or nothing” with listing prices on your affiliate product pages.
A neat thing that you can do with WooCommerce Product Table (and can’t do with other product comparison table solutions) is display sidebar filter widgets for your visitors to interact with your table of affiliate products.
These aren’t required – but I think they make your table a lot more usable.
To add them, go to Appearance → Widgets and drag over the various Product Table… widgets:
Once you do that, your visitors will actually be able to filter out the specific affiliate products that they’re most interested in using your sidebar.
Bonus! Get Creative with Interactive Images
Tables are simple to follow but some people are attracted more to images. In fact, we’ve come to realize that certain people prefer clicking on images to text links.
For example, take a photo of your favorite devices and have each one highlighted on hover. If a visitor clicks on that item, they can be taken directly to the product page with your affiliate link. The use of image maps in WordPress, just like this one, can be incredibly useful to boost sales.
Enjoy A More Usable Table Of Affiliate Products
This tutorial won’t work for every single affiliate website because it hinges on using WooCommerce to manage your affiliate products.
But if you are using WooCommerce, or are open to the possibility, it’s a great way to display a more usable and flexible table of affiliate products.
And because it’s dynamically generated, any new affiliate products that you add to WooCommerce will automatically show up in the relevant tables, which is a lot easier than having to manually edit static tables each time you want to add or update a product.