{"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":"2024-01-27T14:50:41","modified_gmt":"2024-01-27T14:50:41","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>In this tutorial, you will learn How to create a WooCommerce Product Compare page with Elementor.<\/p>\n\n\n\n<p>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>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=\"WooCommerce Product Compare Page\" 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><\/div>\n\n\n<p>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=\"WooCommerce Product Compare Page\" 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>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>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>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><\/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":12,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4275\/revisions"}],"predecessor-version":[{"id":6468,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4275\/revisions\/6468"}],"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}]}}