This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
59
How-to 8 min read September 17, 2019

How to add products comparison to the website

Product comparison on the website is a popular feature in many online stores. The implementation of this feature increases resource usability, allowing customers to make an informed purchase decision based on a comparison of the product characteristics.

Why do you need to compare products in online stores

The comparison allows you to compare several products of the same category, generating a final table with a list of these properties and characteristics. This feature is especially important for household and electrical equipment stores, as well as other products with a large set of technical properties and parameters:
An example of comparing products in an online store
The comparison table in the example above displays both all the characteristics and only those that are different, so that it is easier to compare the product for each criterion.

It's also important that there is quick access to the conversion buttons in the comparison block that allows you to buy goods. Thanks to the comparison feature, the client can make his/her choice on which product to buy without addressing an assistant for help, which simplifies the website usability.

Without the comparison feature, it's more difficult for users to navigate across the variety of products and understand how the price of a particular product is formed. Often the products of one group differ in price only because of several technical characteristics that are best seen when comparing on one page.
It's important that adding the comparison feature is convenient and visual, while the layout of the comparison page should be adapted for mobile devices.
As a rule, CMS online stores already have built-in solutions that allow you to compare products; however, the modules expand the functionality and make use of comparative tables more convenient.

An example of a standard view of a comparison block in OcStore 2.3.0.2.3:
Product Comparison in OcStore 2.3.0.2.3

How to implement product comparison feature in an online store on OpenCart

To improve the standard version of the product comparison function, install the Compare Improve module. This tool allows you to improve product comparison in OpenCart version 2.3 in the following way:

  • separate products when comparing by category;
  • disable unnecessary fields present in the standard version, for example weight, product description;
  • set a limit on the number of products that need to be compared in various categories;
  • use ajax technology when removing goods from the list, so to avoid page reloading;
  • use the slider in the product table;
  • quickly delete all selected products in the table by clicking "Clear All".

The example shows changes in the implementation of the comparison feature: it displays the chosen categories, buttons to enable viewing only differences and removing all products from the table. Additional features and a product slider are also visible:
Compare products in Compare Improve module

How to set up a product comparison feature on WordPress

Comparing products in online stores based on WooCommerce WordPress can be implemented using the YITH WooCommerce Compare plugin:
YITH WooCommerce Compare Plugin
  • the plugin is popular among WordPress users and is actively updated by developers;
  • compatible with the latest CMS version (5.0.3);
  • it has the ability to compare products in the store. All selected products are saved in a comparison table where the user can see the difference between the products;
  • each parameter for comparison is added through the WooCommerce attributes in the product configuration;
  • you can use a simple widget on your website with a list of products that users have added;
  • you can change the appearance of the table using your own styles and templates.

Installing the YITH WooCommerce Compare Plugin

There are two ways to install the plugin:
1
You can find the plugin by searching in the WordPress admin panel.

To do this, go to the "Plugins" section and select "Add New":
Adding a plugin to WordPress
Find the plugin and install it, then activate it:
WordPress Plugin Activation
2
The second way is to download the plugin, and then upload it to the plugins folder on the hosting side located at wp-content/plugins. Next, activate the extension in the "Plugins" section of the admin panel.
After installation, you will see a comparison of products on the website:
Compare Products with YITH WooCommerce Compare
After completing all the settings, the product comparison will look like this:
Compare Products with YITH WooCommerce Compare

Setting up product comparison on other popular CMS systems

#1

Product comparison in Drupal

To add the feature of product comparison on the website using Drupal, you need to install the Entity comparison module. The module allows you to customize the names of buttons for adding and removing products, specify what data will be displayed, and set a limit on the number of products to be compared:
Compare Products at Drupal
#2

Product Comparison in Joomla

For Joomla websites, you can use the JoomShopping product comparison module. This option uses AJAX technology with which the page does not reload. You can set the limit of products that need to be compared. Below is the example of the module product comparison:
Product Comparison in Joomla
#3

Product comparison in Magento

Here you can also install a module for AJAX-comparison of goods without reloading the page, which speeds up the work and improves the website usability. Below is an example of the product comparison using Advanced Compare module:
Comparison of products in Magento
#4

Product comparison in Shopify

The Product Compare module allows you to not only compare products but also share a comparison page to get advice. See the example below:
Compare Products in Shopify
#5

Product comparison in ModX

For ModX, you can use the Comparison component, designed to compare products of one category. The solution works on AJAX technology and pdoTools.
#6

Product comparison in PrestaShop

You can improve the standard product comparison in PrestaShop using the Product Comparison Plus module. The solution adds thumbnails of the selected products to the website footer, clicking on which the user will be forwarded to the comparison page:
Compare Products at PrestaShop
The module also allows you to share the list with friends through social networks:
Product Comparison Plus Product Compare Module

Conclusion

The product comparison feature is a convenient option for online stores with products that have a wide range of technical characteristics that need to be analyzed when making a purchase decision.

It is necessary to use convenient solutions on the project, allowing the user to carry out the following actions:
1
Add products to the comparison chart.
2
Turn on the display mode of only distinct parameters.
3
Add products from the comparison table to the basket.
4
Delete all selected products.
5
Use a custom list of product features and properties for comparison.

This article is a part of Serpstat's Checklist tool
Checklist at Serpstat
Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.
Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits