Back to contents

JetCompareWishlist: How to Create a Page with Products Comparison

JetCompareWishlist plugin provides an opportunity to display comparison table of products. This tutorial will show you how to do it.

When the customer is in doubt about which of several products to choose he would probably want to compare them. JetCompareWishlist plugin gives you all the tools to add a “Compare” button to the product’s single page and create a page where the comparison table will be shown. This tutorial will lead you through all the steps of creating a comparison page.

1 Step — Create a page

If you want to have a separate page for the compare list, you should add a default WordPress page firstly. Open your website’s Dashboard and go to the Pages tab. Click the “Add New” button and create a page for comparison tables.

NOTE. Be aware, that you can use any existing page to place comparison table there as well.

2 Step — Enable comparison settings

To be able to use comparison functionality you have to enable it first. Go to JetPlugins > JetCompareWishlist Settings and turn the Compare functionality on. In the Compare Page field choose the page you created for comparison tables. For more details follow this link to the corresponding guide.

3 Step — Add some products to the comparison table

If you turned the Add default Compare Button toggle on, all the WooCommerce products on our website now have the default “Compare” button. Open the front-end of your website’s shop page and add some products to the comparison list by clicking on the “Compare” button. That’s necessary because otherwise, you won’t see the compared products later in the table.

Add to Compare button

4 Step — Add the Compare widget and customize it

Open the page, that you’ve created previously and hit the “Edit with Elementor” button. Seek for the Compare widget and drop it to the page.

Compare widget

There are three comparison widgets that allow making your shop page more profitable and user-friendly. They are the Compare Button, Compare Count Button, and Compare widgets. You can find out more about their functionality from this tutorial.

Customize all the settings in the Content tab according to your taste and needs. It refers to each widget for product comparison.

In the Style settings block, you can change the appearance of every item of the table according to the design of your shop.

When all customizations will be done, click the “Update” button.

Comparison table front look

Now you know how to create a page with Product Comparison on it. Enjoy the result!