---
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
lang: en
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?

## 

- Utilizes the Woo Compare widget from The Plus Addons for Elementor to create a product comparison page.
- Requires installation and activation of The Plus Addons for Elementor to access the Woo Compare widget features.
- Allows customization of loading text and alignment for responsive devices in the comparison table settings.
- Enables linking the product comparison page from the compare counter using the Woo Compare Count Button settings.

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/)*