--- title: "How to Create a WooCommerce Product Comparison Page in Elementor?" url: https://theplusaddons.com/docs/create-a-woocommerce-product-comparison-page-in-elementor/ date: 2024-07-02 modified: 2026-04-09 author: "Aditya Sharma" description: "Do you want to create a WooCommerce product comparison page in Elementor? Having a separate product comparison page can allow the users to easily compare their selected products and make..." image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-3-3-1024x565.jpg word_count: 641 --- # How to Create a WooCommerce Product Comparison Page in Elementor? ## Key Takeaways - Woo Compare widget from The Plus Addons for Elementor allows users to create a product comparison page with a comparison table. - Users can customize loading text and align it for responsive devices using the Woo Compare widget. - The Woo Compare widget supports displaying product details such as price, SKU, and availability specifically for WooCommerce products. - Users can link the product comparison page from the compare counter to show the number of products added for comparison. Do you want to create a WooCommerce product comparison page in Elementor? Having a separate product comparison page can allow the users to easily compare their selected products and make an informed decision. With the Woo Compare widget from The Plus Addons for Elementor, you can easily create a product comparison page with a comparison table in Elementor. *To check the complete feature overview documentation of The Plus Addons for Elementor Woo Compare widget, [click here](https://theplusaddons.com/docs/add-product-compare-in-elementor/).* ***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.*** To do this, add the Woo Compare widget to the page where you want to show the comparison table for instance we have the page name as “*Product Comparison*”, then follow the steps -  1. From the **Type** dropdown, select **List** under the **Woo Compare** tab. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-compare-type-list.gif) 2. Then from the **Post Type** dropdown, select **Products**. In the **Loading Text** field, you can customize the text when the table is loading. From the **Alignment** section, you can align the loading text for responsive devices. 3. After that from the **Woo Compare List** tab you have to select the elements you want to show in the comparison table. 4. By default, you’ll find four repeater items, open one item. In the **Label** field, you can add the label of the element. 5. Then from the **Field** dropdown, you have to select the elements you want to show. Here you’ll find some options -  - **Image** - To show the product image (featured image for other post types). - **Title** - To show the product title (post title for other post types). - **Price** - To show the product price (works with WooCommerce only). - **Excerpt** - To show the product's short description. - **Description** - To show the product description. - **SKU** - To show the product SKU name (works with WooCommerce only). - **Availability** - To show the product stock (works with WooCommerce only). - **Weight** - To show the product weight (works with WooCommerce only). - **Dimension** - To show the product dimension (works with WooCommerce only). - **Rating** - To show the product ratings(works with WooCommerce only). - **Add to cart** - To show the add to cart button (works with WooCommerce only). - **Remove** - To add a remove button to remove the added item from the table. - **Empty** - To show custom content. - **Custom Field** - To show the value of a custom field. - **ACF** - To show the value of a custom field created with the Advanced Custom Field plugin. > *Note: For Custom Field and ACF you have to use the custom field name. The ACF repeater field will not work.* > *Note: If you have custom product attributes, those will show in the dropdown list.* Select the option as per your requirements. Similarly, you can edit the remaining items. You can click on the **+ Add Item** button to add more elements to the table. 6. Once done update the page. ### Link from Compare Counter Now you can link the product comparison page from the compare counter. To do this open the page or template where you want to show the compare counter and add the Woo Compare widget, then follow the steps -  1. From the **Type** dropdown, select **Count** under the **Woo Compare** tab. 2. Then select **Button** from the **Count Type** dropdown. ![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-compare-type-count-button.gif) 3. After that from the **Post Type** dropdown, select **Products**. 4. Then in the **URL** field add the product comparison page link under the **Woo Compare Count Button** tab. Now when you add a product to compare, it will show the number of products added for comparison and when you click the counter it will take you to the product comparison page to show the comparison table. ***Suggested Reading***: *[How to Add a Compare Button to Custom or Any Other Post Type in Elementor?](https://theplusaddons.com/docs//add-a-compare-button-to-custom-or-any-other-post-type-in-elementor/)* ## Frequently Asked Questions **Q: What are the main benefits of using The Plus Addons for Elementor's Woo Compare widget for a product comparison page?** A: The Woo Compare widget from The Plus Addons for Elementor allows users to create a dedicated product comparison page with a customizable comparison table. This feature helps users easily compare selected products, facilitating informed purchasing decisions. The widget supports various elements like product images, titles, prices, and more, enhancing the user experience. **Q: Can I customize the loading text for the comparison table using The Plus Addons for Elementor?** A: Yes, you can customize the loading text in the Loading Text field when setting up the Woo Compare widget. This feature allows you to provide a more personalized experience for users while the comparison table is loading, which can improve engagement and user satisfaction. **Q: How do I link my product comparison page from the compare counter in Elementor?** A: To link your product comparison page from the compare counter, add the Woo Compare widget to the desired page or template. Then, select 'Count' under the Type dropdown and 'Button' from the Count Type dropdown. Finally, input the URL of the product comparison page in the URL field under the Woo Compare Count Button tab. This setup enables users to see the number of products added for comparison and navigate directly to the comparison page. **Q: What elements can I display in the comparison table created with The Plus Addons for Elementor?** A: The Woo Compare widget allows you to display various elements in the comparison table, including product images, titles, prices, descriptions, SKU, availability, weight, dimensions, ratings, and an 'Add to Cart' button. By selecting the appropriate options in the Woo Compare List tab, you can tailor the table to meet your specific needs. **Q: What is the best practice for configuring the Woo Compare widget for a WooCommerce product comparison page?** A: A best practice for configuring the Woo Compare widget is to ensure that you select the correct Post Type as 'Products' and customize the elements you want to display in the comparison table. This attention to detail helps ensure that users can easily compare relevant information, leading to better decision-making. Additionally, adding custom fields can enhance the comparison experience if you have specific attributes to highlight. **Q: What should I do if the Woo Compare widget is not displaying correctly on my Elementor page?** A: If the Woo Compare widget is not displaying correctly, first ensure that The Plus Addons for Elementor is installed and activated. Check that you have selected the correct options in the widget settings, including the Post Type and the elements to display. If issues persist, reviewing the documentation or troubleshooting common Elementor conflicts may help resolve the problem.