Back to contents

How to adjust the comparison settings for WooCommerce shop using JetCompareWishlist

useful information

This tutorial uncovers the way of adjusting the comparison functionality for WooCommerce shop using JetCompareWishlist plugin.

JetCompareWishlist plugin allows you to create a comparison list that illustrates the features of the selected products. Consequently, the visitor can compare the products and make his/her choice.

This tutorial will teach you how to customize comparison options for your WooCommerce shop.

Adjust comparison settings in WP Dashboard

Read this tutorial to know how exactly to enable comparison settings.

After you’ve performed all the settings, let’s have a closer look at Compare options in the order they are given in the WP Dashboard > Elementor > JetCompareWishlist settings.

Enable the Compare Button widget

This widget allows attaching products to the comparison list. It’s better to add it to Single and Archive product templates.

Compare Button widget for Elementor

Step 1 – Go to the Content > Compare tab and here you can switch between Normal to Added appearance and customize it up to your needs and specific ideas.

Step 2 – In this tab, you are also able to select the necessary icon to the button in the Button Icon dropdown menu. Moreover, you can enter the preferable name to the button in the Button Label Text field.

compare button widget for elementor

Step 3 – In the Compare > Icon block, you should enable the Use Icon option if you want to display an icon on the compare button. After you’ve done it, it’s time to specify its position in the Icon Position dropdown menu.

Step 4 – In the Style tab, you will have the opportunity to set the specific view for the Normal, Hover and Added the appearance of the Compare Button widget, including the typography style, color and icon settings.

Adjust the Compare Count Button widget

This widget allows showing the number of products that were attached to the comparison list. The Compare Count Button can be added to the specific section you want to, either header or footer.

Compare Count Button widget for Elementor

Step 1 – In the Content tab, you can specify the icon you want to be displayed in the count button. To perform it you should go to the Button Icon dropdown menu and choose the icon from the default symbols. You can also add the name to this button by entering it in the Button Label Text field.

Step 2 – In this tab in the Icon block, you can enable the Icon displaying on the chosen page simply toggling on this function. Here, in this block, you need to choose the right position for the button from the default options in the Icon Position dropdown.

Compare Count Button widget for Elementor

Step 3 – In the same tab, you need to go to the Count block where you should toggle on the Show option in order to enable it.

Step 4 – Next, you can specify the parameter settings with the help of the %s macros in the Format field. It allows you to set the format more specifically for the count items added to the comparison list.

Step 5 – In this tab, you can also choose the position of the count items in the Position dropdown menu.

Enable the Compare widget

With the help of this widget, you can simply display the comparison table on the specific page to illustrate the comparison of the selected products.

Compare widget for Elementor

Step 1 – Proceed to the Content > Compare Table block, where you can add some new features you want to and customize each one of them.

Let’s dive deeper into the data type of this block.

Compare button for Elementor settings

If you’ve chosen the Remove Button data type, you should specify the additional settings. For instance, in the Button Text field, you can put in the text of the button. Also, you can adjust the icon of the button in the Button Icon field.

If you’ve selected the Thumbnail data type, you’ll need to specify the size of the image.

If you’ve chosen the Rating data type, you can define the rating icon in the Rating Icon field. What is more, you should go to the WP Dashboard > Elementor > JetReviews Settings and check here the Products item. Then, return to the product edit page and add the review in the bottom block.

What is more, you can select any other option, that you want to: the Title, Price, Description, Short Description, SKU (Stock Keeping Unit), Stock Status, Weight, Dimensions, Attributes. These options will be taken from the Product data block. You should proceed to the WP Dashboard > All Products option to find the necessary product and change this information.

Products set up in WP dashboard

Product Categories and Tags values will be taken from the Custom Taxonomies lists. You should go to the WP Dashboard > Products option and click on Edit link under the preferrable item. Then, you will be able to choose the needed value on the right-side panel.

Another option is Add to cart button which will appear after selecting it in the dropdown menu without additional actions.

Step 2 – After that, proceed to the Content > Settings tab where you can adjust some necessary features.

In the Empty Compare Text field, you should insert the text which will appear if there aren’t any comparison lists.
In the Scrolled Table option, you can allow the table to be scrolled horizontally.
In the Scrolled On option, you should choose devices, where scroll works. In our case, they are Mobile and Tablet ones.

Compare widget for Elementor Settings

These easy steps are all you have to do to adjust the comparison settings for WooCommerce shop using JetCompareWishlist plugin.