How to create a product comparison page with CoDesigner?

The product comparison button and product comparison widgets are new features released with CoDesigner 3.0. I will demonstrate the steps to create a product comparison page in this documentation-

1. To use these widgets, first, you need to make sure you are using CoDesigner 3.0 and have the widgets enabled in the settings.

 

 

2. Now create a new page where you wish to show the product comparison widget and edit with Elementor.

 

 

3. Now add the product comparison widget on a new section of the page.

 

Add CoDesigner product comparison to a new section

 

4. The product comparison widget is fully customizable. In the content tab, you will find options to add and edit the features.

 

Edit content of Product comparison

 

5. You can add price, average rating, description, short descriptions, attributes, categories, tags, and meta fields as contents.

 

features

 

6. There’s also, an option to change the button text, change the close button icon, zoom or redirect to the product page on product image click and show/hide the product image.

 

option to change the button text, change the close button icon, zoom or redirect to the product page on product image click and show/hide the product image

 

7. You will find a lot of options to design the table, header, body, select box, button, remove button, and product image too.

 

Product comparison style

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *