{"id":6628,"date":"2024-03-10T11:19:18","date_gmt":"2024-03-10T05:19:18","guid":{"rendered":"https:\/\/codexpert.io\/?p=6628"},"modified":"2026-05-14T15:32:52","modified_gmt":"2026-05-14T09:32:52","slug":"create-product-comparison-page-elementor","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/create-product-comparison-page-elementor\/","title":{"rendered":"Create WooCommerce product comparison page with Elementor in 8 simple steps"},"content":{"rendered":"<div class='cx-content-before'><\/div><p>Product Comparison means comparing two or more products in a way that the readers can grasp the differences instantly. Having a product comparison page enables your visitors to see if the featured items or products are better than other products of your eCommerce site.<\/p>\n<p>The ability to compare products that fulfill almost the same needs, helps the customers make decisions more quickly. This feature can be really helpful for stores that sell tools, electronics, appliances, digital goods with almost similar features. That makes this feature an essential part of an eCommerce store.<\/p>\n<p>That&#8217;s why CoDesigner, a popular Elementor addon came with <strong>new premium widgets<\/strong> &#8211; product comparison and product comparison buttons. These widgets are available the version 3.0 of <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a>.\u00a0 Today, I will show you the steps to create a product comparison page only in a few minutes!<\/p>\n<p>&nbsp;<\/p>\n<h3 style=\"text-align: center\" id=\"cx-heading-1\">8 steps to create a product comparison page with CoDesigner<\/h3>\n<p>&nbsp;<\/p>\n<p>Before starting to design a product comparison page with CoDesigner, make sure you have the following plugins installed on your WordPress site \u2013<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/woolementor\/\" target=\"_blank\" rel=\"noopener\">CoDesigner<\/a><\/li>\n<li><a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner Pro<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Now that you have all the necessary plugins installed on your WordPress site, let\u2019s start creating a product comparison page with CoDesigner.<\/p>\n<p>&nbsp;<\/p>\n<p>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.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6630 size-full\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Product-comparison.png\" alt=\"Enable product comparison and product comparison button widgets\" width=\"1392\" height=\"456\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison.png 1392w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-300x98.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-1024x335.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-768x252.png 768w\" sizes=\"auto, (max-width: 1392px) 100vw, 1392px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>2. Create a new page where you wish to show the product comparison widget and edit the page with Elementor.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6631 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/create-a-new-page.png\" alt=\"\" width=\"579\" height=\"278\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/create-a-new-page.png 579w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/create-a-new-page-300x144.png 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>3. Now, I will add the product comparison widget to a new section of the page.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6632 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Add-WC-Designer-product-comparison-to-a-new-section-1024x323.png\" alt=\"\" width=\"800\" height=\"252\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Add-WC-Designer-product-comparison-to-a-new-section-1024x323.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Add-WC-Designer-product-comparison-to-a-new-section-300x95.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Add-WC-Designer-product-comparison-to-a-new-section-768x242.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Add-WC-Designer-product-comparison-to-a-new-section.png 1681w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>4. It&#8217;s time to customize and design the widget. The product comparison widget is fully customizable. In the content tab, you will find options to add and edit the features. Your consumers might be interested in different features according to your store type. So, you can delete the default features and add the ones you think suit the best with your store. I&#8217;m keeping the default features for this tutorial.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6633 size-large aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Edit-content-Product-comparison-1024x336.jpg\" alt=\"Edit content of Product comparison\" width=\"800\" height=\"263\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Edit-content-Product-comparison-1024x336.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Edit-content-Product-comparison-300x98.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Edit-content-Product-comparison-768x252.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Edit-content-Product-comparison.jpg 1688w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>5. You can add price, average rating, description, short descriptions, attributes, categories, tags, and meta fields as contents.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6635 size-full\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/features-e1635243365851.jpg\" alt=\"\" width=\"301\" height=\"563\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/features-e1635243365851.jpg 301w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/features-e1635243365851-160x300.jpg 160w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>6. There&#8217;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.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6634 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Product-comparison.gif\" alt=\"\" width=\"296\" height=\"316\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>7. You will find a lot of options to design the table, header, body, select box, button, remove button, and product image too.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6636 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Product-comparison-style.gif\" alt=\"\" width=\"600\" height=\"210\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>8. I will add a product comparison button on a <strong>single product template<\/strong> that was created using CoDesigner. Make sure the single product template is set for all the products and categories in the condition setting of the template. Then I will set this product comparison page as default in the <strong>Condition<\/strong> tab of the product comparison button settings.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6652 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Set-product-page-in-the-condition.png\" alt=\"\" width=\"303\" height=\"349\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Set-product-page-in-the-condition.png 303w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Set-product-page-in-the-condition-260x300.png 260w\" sizes=\"auto, (max-width: 303px) 100vw, 303px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Now if you click the <strong>product comparison button<\/strong> on a single product page, it will redirect you to the <strong>product comparison page<\/strong> created using the CoDesigner.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6654 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Product-comparison-button-on-a-single-product-page-1024x589.png\" alt=\"Product comparison button on a single product page\" width=\"800\" height=\"460\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-button-on-a-single-product-page-1024x589.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-button-on-a-single-product-page-300x172.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-button-on-a-single-product-page-768x441.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-button-on-a-single-product-page.png 1204w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This is how the product comparison page looks like after making some simple changes.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6655 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Product-comparison-page-1024x580.jpg\" alt=\"\" width=\"800\" height=\"453\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-page-1024x580.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-page-300x170.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-page-768x435.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/10\/Product-comparison-page.jpg 1168w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>You can now compare this product with as many products as you want. All you need to do is &#8211;<\/p>\n<p style=\"text-align: left\">Click the Select a Product dropdown &#8211; Select the product you wish to compare &#8211; Click the compare button<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6656 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/10\/Adding-product-to-comparison-table.gif\" alt=\"Adding products to comparison table\" width=\"600\" height=\"291\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This is how you can easily let users compare all types of products on your site.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\"><strong>Watch CoDesigner Product Comparison in action<\/strong><\/p>\n<p><iframe loading=\"lazy\" title=\"Product Comparison\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/s6JoS5RZt_g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3 style=\"text-align: center\" id=\"cx-heading-2\">Some tips for a better product comparison experience<\/h3>\n<p>To provide the best experience of the product comparison feature to the consumers, the following tips are highly recommended:<\/p>\n<ol>\n<li>Give appropriate and easy to search names to your store products.<\/li>\n<li>Try to get ratings for the goods you sell on your eCommerce store. This will help the consumers to find the best products without any hassle.<\/li>\n<li>Try to keep the most attractive and valuable features listed in the product short description.<\/li>\n<li>Use appropriate tags while adding a product to your eCommerce store.<\/li>\n<li>Set lucrative prices for the top-rated products. Also, you can occasionally give discounts on these products.<\/li>\n<li>Categorizing all your products accordingly will also help the users find and comp0are the products they are looking for.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3 style=\"text-align: center\" id=\"cx-heading-3\">Conclusion<\/h3>\n<p>Product comparison features are an inseparable part of an ideal eCommerce store. This feature can bring you more sales and recurring customers as they will be able to quickly compare the products they need. This will also make the customers more comfortable with your eCommerce store as they won&#8217;t get lost figuring out where the products are by jumping from one page to another. So what are you waiting for! Try this exclusive new feature of <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a> today!<\/p>\n<div class='cx-content-after'><\/div>","protected":false},"excerpt":{"rendered":"<p>Product Comparison means comparing two or more products in a way that the readers can grasp the differences instantly. Having a product comparison page enables your visitors to see if the featured items or products are better than other products of your eCommerce site. The ability to compare products that fulfill almost the same needs, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":23226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[14],"tags":[26],"class_list":["post-6628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","tag-woolementor"],"_links":{"self":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/comments?post=6628"}],"version-history":[{"count":1,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6628\/revisions"}],"predecessor-version":[{"id":33264,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6628\/revisions\/33264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/23226"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=6628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=6628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=6628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}