Back to contents

How to create a page with Products Comparison

JetCompareWishlist plugin provides a unique opportunity to display compare table with the products. It will be a great tool for the visitors of your shop.

From this tutorial, we will learn how to create a specific page to display the compare list. As you might know, with JetCompareWishlist plugin you can add a compare button to the product templates. Hence, you need to assign a particular page in order for the user to view all the products that have been added to the compare list.

So let’s dive in!

Creating a page

If you want to have a separate page for the compare list, you should add a default WordPress page firstly. Note, that you can use any existing page as well.

Enabling the Comparison settings

The next move you should perform is to adjust the Comparison settings in WordPress Dashboard.

For more details follow this link to the corresponding guide.

Adding Products Comparison to the page

Remember, that it should be the page that you have previously created and selected as a Compare Page in the settings.

Step 1 — You should open the front-end of your shop page of the site and add some products to the Comparison list, for instance.

Step 2 – Then, open the page, that you’ve created previously and selected in the WP Settings. Open it with Elementor editor. Then, drag and drop the comparison widget.

We have three comparison widgets that allow making your shop page more profitable and user-friendly. They are: the Compare Button widget, Compare Count Button and Compare one. You can find out more about their functionality with the concrete appliance from this tutorial.

Compare widget for Elementor

Step 3 — Next, you should customize all the settings in the Content tab. It refers to each widget for product comparison.

Step 4 — After that, you can navigate to the Settings block and correct here the Title of the page (if you want to change it).

Also, you can specify the Status of the page and make it Published or the Private one (for WordPress users at Administrator level only), for example.

In this block, you will have an opportunity to hide the title in the Hide Title switcher, in case you don’t want it to be displayed.

Moreover, you can select the necessary Page Layout in the corresponding dropdown menu. You have a choice from the default option from which you can set the most appropriate.

Step 5 — In the Style block, you can change every item of the table according to the design of your shop.

Step 6 — After all customizations will be done, click the Update button.

WooCommerce products with Compare widget

In this case, we have used the Compare widget and added 3 items to the comparison list.

Now you can check how your page looks for the visitors. Enjoy the result!