---
title: "How to Add Product Compare in Elementor?"
url: https://theplusaddons.com/docs/add-product-compare-in-elementor/
date: 2024-06-28
modified: 2026-04-09
author: "Aditya Sharma"
description: "Allowing users to compare products side by side helps them to choose the correct product and reduces a lot of manual work of checking each product one by one.  With..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Animated-Headings-In-Elementor-8-1024x565.jpg
word_count: 846
---

# How to Add Product Compare in Elementor?

## Key Takeaways

- Woo Compare widget from The Plus Addons for Elementor allows users to compare products side by side.
- The Plus Addons for Elementor offers three types of compare options: Button, Count, and List.
- Users can add the compare feature to products, standard post types, and custom post types with the Woo Compare widget.
- The Woo Compare widget requires the PRO version of The Plus Addons for Elementor to be activated.

Allowing users to compare products side by side helps them to choose the correct product and reduces a lot of manual work of checking each product one by one. 

With the Woo Compare widget from The Plus Addons for Elementor, you can easily add a compare feature to WooCommerce products as well as to other post types in Elementor.

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Woo Compare widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Woo Compare and activate.

## How to Activate the Woo Compare Widget?

Go to 

- **The Plus Addons**→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/06/woo-compare-activate.png)

## Key Features

- **3 Types** - You add a compare option in three types - Button, Count, and List.

- **Different Post Types** - You can add the compare feature to products, standard post types, and custom post types.

## How to Use the Woo Compare in Elementor?

Based on your usage requirements you have to add the Woo Compare widget to a page or template.

### Woo Compare

From the **Type** dropdown, you have to select the compare type you want to add. 

![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-compare-type.gif)

Here you’ll find three options - 

- **Button** - To [add a compare button to a custom product skin loop](https://theplusaddons.com/docs//add-product-compare-button-to-a-custom-woocommerce-product-skin-in-elementor/), a single product, or any other post type.

- **Count** - To [show product compare count or any other post type](https://theplusaddons.com/docs//add-a-compare-button-to-custom-or-any-other-post-type-in-elementor/).

- **List** - To [show products or any other post types comparison in a comparison table](https://theplusaddons.com/docs//create-a-woocommerce-product-comparison-page-in-elementor/), ideal for creating a product compare page.

Select the option as per your requirements. Options will vary based on your selection. Let’s select Button here.

Then from the **Post Type** dropdown, you have to select the post type where you want to add the compare button, here you’ll find a few options –

- **Posts** - To add a compare button to a blog post custom skin loop or single blog post.

- **Pages** - To add a compare button to a page custom skin loop or a single page.

- **Custom Post Types** - To add a compare button to a custom post type custom skin loop or single custom post type.

- **Products** - To add a compare button to a product custom skin loop or a single product.

> *Note: The custom post type option name will depend on the custom post type name and the number of items will depend on the number of custom post types you have.*

Select the option as per your requirements.

### Woo Compare Button

From the **Compare Type** dropdown, you have to select the content type on the button. 

![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-compare-button.gif)

Here you’ll find three options - 

- **Icon** - To show the button with an icon only.

- **Text** - To show the button with text only.

- **Text/Icon** - To show the button with an icon and text.

Select the option as per your requirements. Let’s select Text/Icon here.

In the **Add to Compare** field, you can edit the default button text.

Then in the **Remove From Compare** field, you can customize the button text when the item is added to the compare list.

From the **Already in Compare** field, you can edit the tooltip text of the button when the item is already added to the compare list.

In the **Add Icon** section, you can add an icon when the item is added to the compare list.

In the **Remove Icon**, you can add an icon when the item is removed from the compare list.

## How to Style the Woo Compare Widget?

To style the Woo Compare widget you’ll find all options in the **Style** tab. The options will vary based on the selected compare type.

**Icon** - You’ll see this option only when the Button type is selected in the Content tab. From here, you can style the icon of the compare button.

![](https://theplusaddons.com/wp-content/uploads/2024/07/woo-compare-style.png)

**Spinner** - You’ll see this option only when the Button type is selected in the Content tab. From here, you can style the spinner on the compare button visible when an item is added or removed.

**Button** - You’ll see this option only when the Button type is selected in the Content tab. From here, you can style the compare button.

**Count** - You’ll see this option only when the Count type is selected in the Content tab. From here, you can style the counter. 

**Box** - You’ll see this option only when the List type is selected in the Content tab. From here, you can style the comparison table.

**Heading** - You’ll see this option only when the List type is selected in the Content tab. From here, you can style the comparison table headings.

**Content** - You’ll see this option only when the List type is selected in the Content tab. From here, you can style the comparison table content.

Advanced options remain common for all our widgets, you can explore all its options from here.

[View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..)

## Frequently Asked Questions

**Q: What should I do if the Woo Compare widget isn't activating in The Plus Addons for Elementor?**
A: If the Woo Compare widget isn't activating, ensure that both the Elementor FREE Plugin and The Plus Addons for Elementor plugin are installed and activated. Additionally, confirm that you have the PRO version of The Plus Addons for Elementor, as this widget is a premium feature. Go to The Plus Addons u2192 Widgets, search for Woo Compare, and turn on the toggle to activate it.

**Q: Can I add a compare feature to custom post types using The Plus Addons for Elementor?**
A: Yes, The Plus Addons for Elementor allows you to add the compare feature not only to WooCommerce products but also to standard and custom post types. This flexibility means you can tailor the compare feature to various content types, enhancing user experience across your site.

**Q: What are the best settings for adding a compare button in Elementor?**
A: When adding a compare button using The Plus Addons for Elementor, you can choose from three content types: Icon, Text, or Text/Icon. Selecting Text/Icon is often effective because it provides clarity to users. Additionally, customize the button text in the 'Add to Compare' and 'Remove From Compare' fields to make it more intuitive.

**Q: How can I style the Woo Compare widget in Elementor?**
A: Styling the Woo Compare widget can be done through the Style tab, where options vary based on the selected compare type. For example, if you choose the Button type, you'll see options to style the button and its spinner. This customization allows you to ensure that the compare feature aligns with your site's design, enhancing overall aesthetics.

**Q: What happens if I don't activate the Woo Compare widget?**
A: If you don't activate the Woo Compare widget, users won't have the ability to compare products or post types on your site. This feature is crucial for providing a streamlined shopping experience, allowing users to make informed decisions without manually checking each product.

**Q: How do I add a compare button to a custom product skin loop in Elementor?**
A: To add a compare button to a custom product skin loop, select the Button option from the Type dropdown when using the Woo Compare widget. You can then choose the post type where you want to add the button, ensuring it integrates seamlessly into your custom layout. This approach enhances user engagement by providing direct comparison capabilities.