How to Add WooCommerce Product Comparison Element to Your Website Easily
Nowadays, creating shop websites using WordPress is very popular and easy. Thanks to WooCommerce, the most popular plugin for creating shops, and many customer-friendly WooCommerce themes, today almost everyone can make a great shop very quickly.
The fact that this way of creating a shop is very popular speaks in favor of the daily creation of new add-ons that can contribute to the improvement of your site. Presenting a product has never been easier, there are countless ways you can get the attention of consumers.
One such element is certainly WooCommerce product comparison. It is used to present selected products by comparing their characteristics. This way of presenting is good both for the customers and for you. When customers want to decide on a particular product, they like to have a clear comparison of their options. You can easily make it possible for them.
The Addon that has caught our attention and that we found useful for shop product comparison, but also for many other things is Qi Addons for Elementor. This tool has a free version with 60 widgets and a premium version with 40+ more. All the widgets are extremely useful and allow you to add beautiful and practical elements to your pages in just a couple of clicks. The customization options are incredible too so you can easily style all the widgets to match your website’s design impeccably.
The product comparison widget is used to display products with their essential characteristics in one place and provide customers with clear information in one place.
Using this widget is very easy. The data in the table is retrieved directly from the product itself, there are no usual complications related to the manual entry. All that you need to do is choose the products that will be in the table and the information that will go with them.
Also, it is important to style the table and the WooCommerce product comparison widget gives you many options for that. There is certainly a default look that you get as soon as you insert the widget to the page and you will immediately see how some things like fonts match the look of your theme. So with just a little customization, your table can look great.
Once you have added your products, and information related to them, you can start creating a product comparison table. This is a preview of one product made using the WooCommerce plugin.
Once you enter to edit the desired page using Elementor, you will find the Product Comparison widget among the available widgets. All Qi widgets have a distinctive look and red icons.
When you drag the widget to the side you will notice that there is no table – only a notification saying “Please choose desired products“. Of course, you need to add products first. You will be able to find all the settings for this element in the Content and Style tabs. The Advanced tab also offers various settings, but they belong to Elementor and you already know them because each element has them, they are not specific to this one.
So let’s start. The content tab is where you will determine what data will be in your product comparison table. To begin with, we will simply add products.
Also, we can choose the order in which the selected products will be placed in the table, whether by ID, date, random…
Filters to show is an option that determines which data will be used in the comparison table. Currently, there are 4 items: image, title, price, and stock, ie. availability.
However, you can choose anything from the list in the order that suits you. We have made this selection for our table:
You will notice that some parts are clickable, such as the name of the product that leads to the page of the product, and of course ‘add to cart’ which allows you to add the product to the cart on the spot. Naturally, it is not necessary for the add-to-cart to be part of your table, but in most cases, it will be very useful.
Button settings are related to the add to cart button. These settings are important if you decide to add them to the table. There are several layouts and button types available. You can also add an icon to the button and make it even more interesting. It all depends on your needs and our advice is to explore all the options. We will not go through each one separately because they are intuitive and you also see all the changes you make live on the right side of the screen, and you will very easily understand everything by yourself.
Rating options are linked to display ratings, logically, if you have chosen to be an integral part of your display. Although stars are the most common way to display a rating, it does not mean that you cannot select any other icon. The Icon library is at your disposal, but you can also add the desired SVG yourself.
As we said, the Content tab is used to select the data to be displayed and now we move on to the Style tab where we can style each selected element.
The settings are grouped and at first glance, it is clear where the settings are. Of course, go through each group to see what is there. Options for choosing colors, margins, typography, size will amaze you when you realize how many details you can adjust.
We do not want to go through all the options because we are sure you’ll find it interesting to explore and play, we will just go through a couple of important ones.
Image style is an interesting and significant option. We know from experience that often not all products have a featured image of the same dimensions (the image that represents the product and which is also in our table). Then the problem arises that the images in the table will be shown in different dimensions. That is why Square, Landscape, portrait and custom options are important to us, because they allow us to set the pictures to be of the same sizes. Other options are also interesting and we use them most often when there are no large deviations in the sizes of featured images.
Button style options are also something that we will need in most cases to adjust the button to the look of the theme. Although it has its default appearance and can remain without change, you will probably want to adjust it a bit more.
You can change the background, the entire subtitle typography, arrange padding… And you can also set what the hover button will look like.
Rating Style, among other things, includes options for changing the size of the used icons, which can be important to you, but also for the space between them and for the stylization of marked and unmarked parts of the rating.
And here’s what it looks like when we let the imagination run free… You will see that the last product does not have a rating, the reason – no one rated it and as you can see that field is empty. If you mind an empty field, you can easily replace the rating field with some other element. Of course, once a table is set, the data in it can be changed…
In Conclusion
There are many different shopper types, but generally, everyone likes a neat product comparison table. As you can see, with Qi Addons adding product comparison is as easy as it can get so there’s no need to hesitate even if you are a complete WordPress beginner – you can add beautiful, customized product comparison tables effortlessly and without investing too much of your time into it. Once you get the hang of how simply the Qi Addons works, you will surely be interested in adding more useful elements to your web shop such as opening hours, Elementor process widget or maybe you’ll want to explore how to emphasize specific content by highlighting text. There are surely many different ways to make your website more engaging and attractive, not to mention profitable too.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
