{"id":4275,"date":"2022-04-30T04:37:27","date_gmt":"2022-04-30T04:37:27","guid":{"rendered":"https:\/\/webnus.net\/wooshop-builder-help\/?p=4275"},"modified":"2026-10-06T07:12:38","modified_gmt":"2026-10-06T07:12:38","slug":"woocommerce-product-compare-page","status":"publish","type":"post","link":"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-product-compare-page\/","title":{"rendered":"WooCommerce Product Compare Page"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this tutorial, you will learn How to create a WooCommerce Product Compare page with Elementor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce Products Compare allows customers to compare products within their store. Using this tool, your customers can make better decisions on the products they need.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a WooCommerce Product Compare page with Elementor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To create a comparison page, please head over to <strong>ShopPress &gt; Components &gt; Compare<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-001.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1826\" height=\"1438\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-001.png\" alt=\"ShopPress Woo Templates page with an arrow pointing to the Compare toggle and Config button\" class=\"wp-image-6465\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-001.png 1826w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-001-300x236.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-001-1024x806.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-001-768x605.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-001-1536x1210.png 1536w\" sizes=\"(max-width: 1826px) 100vw, 1826px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">To create a Compare page, click Add New and name the template. Click the Edit Icon in the added template to start customizing the compare page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-002.png\"><img decoding=\"async\" width=\"1828\" height=\"988\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-002.png\" alt=\"ShopPress Compare template settings with the edit tooltip highlighted\" class=\"wp-image-6467\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-002.png 1828w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-002-300x162.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-002-1024x553.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-002-768x415.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/compare-002-1536x830.png 1536w\" sizes=\"(max-width: 1828px) 100vw, 1828px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, you will be redirected to an Elementor page, and there you can edit all the elements of your Compare page individually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simply drag and drop the Products Compare widget in the Elementor content area to start customizing the Compare Page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04.png\"><img decoding=\"async\" width=\"2880\" height=\"1627\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04.png\" alt=\"Compare Page\" class=\"wp-image-6174\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04.png 2880w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04-300x169.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04-1024x578.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04-768x434.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04-1536x868.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/compare-04-2048x1157.png 2048w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After saving the designed template, the Compare page will be displayed as per the design created in Elementor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/sp-sc-compare.png\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"494\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/sp-sc-compare.png\" alt=\"Compare Page.\" class=\"wp-image-6172\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/sp-sc-compare.png 638w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/sp-sc-compare-300x232.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn How to create a WooCommerce Product Compare page with Elementor. WooCommerce Products Compare allows customers to compare products within their store. Using this tool, your customers can make better decisions on the products they need. Create a WooCommerce Product Compare page with Elementor To create a comparison page, please [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[80],"class_list":["post-4275","post","type-post","status-publish","format-standard","hentry","category-woo-templates","tag-woocommerce-compare-page"],"_links":{"self":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/comments?post=4275"}],"version-history":[{"count":13,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4275\/revisions"}],"predecessor-version":[{"id":6960,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4275\/revisions\/6960"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/media?parent=4275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/categories?post=4275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/tags?post=4275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}