How to compare WooCommerce products

Published

Having the ability to compare WooCommerce products in your online store can help your customers choose the right product for them. Product comparisons are especially useful when you are selling a product with slight variations or specs. Having a table with the different product specs listed is extremely intuitive for a customer. There is little wonder why the likes of Apple uses comparison tables for their products on their website.

Adding a comparison table to WooCommerce unfortunately does not ship as a standard feature of WooCommerce. However, the good news is that there are many different plugins that you can use to add this feature to your own store.

In this guide, we’ll show you exactly how you can add a table to compare products. From picking the right plugin, to installing it and actually adding a table to your site. Let’s get started.

Step 1: Install a plugin to compare WooCommerce products using a table

As mentioned above, we need to find and install a plugin first before we can do any setup and configuration. There are many different plugins available to do this, which makes it difficult to pick the right one. Let us help you pick the right one.

Here at WP Geeks we’re in the process of building out a WooCommerce product comparison plugin. Unfortunately, it’s not quite ready yet for release (you can follow updates on this blog via our blog).

While we’re waiting for that plugin to be launched, we recommend that you install the Product Compare for WooCommerce plugin which is found on the WordPress.org plugin repository.

Download the plugin and install it to your WooCommerce store. Once installed, move on to the next step.

Step 2: Configure the comparison table settings

Now that the plugin is installed, it’s time to configure the plugin. Navigate to “WooCommerce” on the WP Admin sidebar and click “Compare Products” on the submenu. You should now see the settings page for the plugin which looks like this:

Compare WooCommerce Products - Settings

From this page you can select the attributes that you would like included on the comparison table. Plus customize what the compare button and the look and feel of the actual table should look like. You’re also able to customize the label text to change the wording to suit your brand/business.

The most important setting that you’ll most likely want to modify is the color scheme. Navigate to the “Style” tab to update the colors.

Once you’re happy, move on to step 3.

Step 3: Add the WooCommerce comparison table sidebar widget

For this plugin to work, you need to include the sidebar widget to your theme. This adds an area to your theme where the products that are selected for comparison can be viewed. Additionally, it provides a button which should be clicked when the user is ready to compare products.

Without adding the widget, the plugin will not work and you will not be able to compare WooCommerce products.

To add the widget, go to “Appearance” > “Widgets” on the WP Admin menu. Find the widget called “WooCommerce Products Compare” and add it to your sidebar widget area. This is what it looks like on our demo store.

WooCommerce Product Comparisons - Widget

Step 4: Test that you are able to compare WooCommerce products on your store

Lastly, make sure everything is working by navigating to the frontend of your store. You should now see that under each product, there is a new button added called “Compare”. You can click this, and as you do so, it adds the product to the sidebar widget that we added in Step 3.

Once you’ve selected two or three products for comparison, click the “Compare” button on the sidebar widget and you should be taken to a page which shows the comparison table of the products you selected.

And that is all there is to it. We hope that you found this guide useful! Feel free to let us know if you ran in to any issues getting the plugin setup and we’ll do our best to assist you in the comments below.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.