Help Center
How to Create a Page with Products Comparison

How to Create a Page with Products Comparison

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

Before you start, check the tutorial requirements:

When the customer is in doubt about which of several products to choose, he would want to compare them. The JetCompareWishlist plugin gives you all the tools to add the “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.

Create a Page

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

Warning

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

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 the How to Enable Comparison Functionality guide.

Add Some Products to the Comparison Table

If you turn 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

Add the Compare Widget and Customize It

Open the page that you’ve created previously and hit the “Edit with Elementor” button. Seek 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 the Compare Widgets Overview.

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 are done, click the “Update” button.

Comparison table front end look

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

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.