If you’ve ever shopped for something online, you’ve probably come across a product comparison table. That’s because, in addition to being used by nearly every Amazon niche site, product comparison tables are just flat-out a helpful way to help your visitors make a purchasing decision.
You could compare different products that you’re selling for affiliate commission, compare your own products, or compare multiple products that you sell on your own store.
For example, Amazon is the king of helpful product comparison tables:
I use their tables all the time to help make the right purchase. And you can help your readers do the same by creating your own tables.
But how can you actually create product comparison tables on WordPress? Therein lies the rub.
While some affiliate-oriented page builders like Thrive Content Builder make it easy to create comparison tables, my favorite solution for this is the 100% free TablePress plugin.
In this post, I’ll give you a quick tutorial on how you can use TablePress to create your very own product comparison tables on WordPress.
How to Use TablePress to Create Product Comparison Tables
At its core, TablePress is pretty easy to use. All you need to do is:
- Import your table from an external source OR build it inside the TablePress interface
- Style your table
- Insert your table using a shortcode
For the tutorial, I’ll show you how to create your table using the TablePress interface because I think that’s the easiest method for a small table. But you can just as easily build your table in Excel or Google Sheets and then import it.
Article continues after this block
Step 1: Create a New TablePress Table
Assuming that you’ve already installed and activated the free TablePress plugin, you can get started by going to TablePress → Add New Table:
Give it a name (internal) and choose the number of rows and columns. Don’t worry about making this perfect yet – you can always add or delete rows and columns later on.
Step 2: Add Your Table Content
Now, you’re already set up to start adding your content. All you need to do is click into a cell and start typing.
For this example, I’ll create a product comparison table for some page builders – but you can do whatever you want.
Here’s an example of how you could set it up:
If you notice above, I’ve conspicuously left the Purchase column empty. That’s because I don’t want to just paste in a link here – I want to actually create a conversion-boosting button to push people towards that valuable affiliate click.
One way to do that would be to use CSS. In fact, if you can handle it, that’s my recommended method. But…I recognize that asking everyone to learn CSS isn’t the best way of teaching.
Good news, though – you can actually use the popular Shortcodes Ultimate plugin to create buttons for your product comparison table. Here’s how:
First, click the Advanced Editor button, then click on the Purchase column row that you want to add the button to:
Now, assuming you have Shortcodes Ultimate installed and activated, you can use the Insert shortcode button to add a styled button via Shortcodes Ultimate:
You can also use the Advanced Editor to insert images if that’s relevant to your product.
Put it all together and you should have something that looks like this:
Let’s check-in how on that looks on the front-end:
It looks pretty good – but we still have those odd search, sort, and pagination options. Those are good for a regular table…but not so helpful for a product comparison table. In the next section, I’ll show you how to turn them off to streamline your table.
Step 3: Style Your Product Comparison Table
In Table Options, you can choose whether or not to alternate row colors and/or highlight a row when a visitor hovers over it. You can also add custom classes for styling purposes here:
Honestly – most of these are just preference. I prefer to turn off Row Hover Highlighting, but that’s just me.
While you can go through and pick and choose, my recommendation for product comparison tables is to just turn them all off by unchecking the first box:
And with that, all of those distracting elements are gone from your product comparison table:
Make sure to save your changes and you’re all set!
Step 4: Insert Your Product Comparison Table via Shortcode
To display your product comparison table on the front-end, all you need to do is use the new TablePress TinyMCE button to insert the shortcode for your chosen table:
And you’re done!
Taking it Further – Inserting Amazon Products into Comparison Table
I want to tack on this extra section because I know that product comparison tables are pretty much a mainstay of any Amazon niche site.
So if you want to include more data from Amazon, you have a few different options:
- Use a plugin like EasyAzon to generate a shortcode to insert Amazon product data
- Grab the code from Amazon Site Stripe for images + link
For example, if you paste the embed code from Amazon Site Stripe into one of the TablePress cells like this:
Then you’ll get something like this on the front-end:
And you can also use the original method that I outlined above and create your own buttons. That’s totally fine for Amazon product comparison tables. In that case, just make sure you stay on the good side of Amazon Associate’s rules. That means things like not listing a price or including the Amazon logo in your own button.
Wrapping Things Up
To truly get the most from TablePress, you might want to dive into custom CSS. But even in its default form, TablePress creates some fairly functional and easy-to-read product comparison tables.
The one area where you definitely need to add styling is buttons. Plain links just plain (sorry!) aren’t going to get you as many clicks. I showed you how you can use Shortcodes Ultimate to do that – but custom CSS buttons are always a good option if you have the code chops.
Now over to you – what do you usually use to create product comparison tables for WordPress? I know there are some specialized tools – I just like TablePress because it’s so flexible.