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 Compare page
In case, you want to have a separate page for compare list, you should create a default WordPress page firstly. Note, that you can use any existing page as well.
Step 1 — Open the page in Elementor and drag and drop the Compare widget.
Step 2 — By default, you will see 3 fields: remove option, the thumbnail of the product and the title. Here you can customize each field according to your needs and click Add Item to add a new filed.
From the Data Type dropdown, you can select the feature that you need to display in the comparison table. Note, that the value should be set for the product beforehand.
Also, you can set the title or leave this field empty. Additionally, for Remove field, you can set an icon and button text as well.
So, you should customize each data type. For instance, in Thumbnail type you can choose the size of the images.
Depending on which features you need to show to your visitors for the comparison, you should add the corresponding features to the table content. In my case, it will be Remove option, thumbnail, the title of the product, price, categories and Add to Cart button.
Step 3 — After that, you can navigate to the Settings block and adjust the notification if the compare table will be empty. Also, you have an opportunity to enable Scrolled Table option.
Step 4 — In the Style block, you can change every item of the table according to the design of your shop.
Step 5 — After all customizations will be done, click Update button.
Step 6 — The last important thing that you have to do is to go back to WordPress Dashboard and navigate to Elementor > Jet Compare Wishlist Settings.
Here you should assign the page you have created. In my case, it is Compare page. After you’ve done, don’t forget to save the changes.
Now you can check how the compare table looks on front-end. Enjoy!