Compare Products


To install Compare products:

  1. Download WooCommerce Compare Products Extension  PRO Version or Lite Version
  2. Upload the woocommerce-compare-products folder to your /wp-content/plugins/ directory
  3. Activate the ‘WooCommerce Compare Products’ from the Plugins menu within WordPress

Admin Settings

When WooCommerce Compare Products is installed and activated it auto-creates a Compare Products admin section on your WooCommerce site.

WooCommerce Compare Products

Getting Started – Planning

It is important to always remember that the compare products feature is a selling tool. You are compiling a data set of product Features and or specifications that when compared side-by-side will help your customers make a purchasing decision.

It can be a daunting task to add the compare feature to an entire store of 100’s or 1,000’s of products. The good news is that the compare feature can be added by 1 Product Category at a time. Here are our pre-setup suggestions:

  1. Start with a Single Product Category. Products in any store that have similarities are grouped into categories.
  2. Now make a list (with pen and paper, Word Doc etc) of all Features / Specifications that are common to the majority of products in that Category. The list should include anything that you think is a ‘selling’ feature.
  3. Once you have your list of Comparision features – you are ready to get started.

Setup Compare Categories and Attributes then assign them to products

Step 1 – Creating Compare Categories

Now you have your list, go to the Product Categories Menu, edit the Product Category that you have chosen and switch ‘ON’ the Compare Product feature for that category.

If you have not created any product categories yet, you can apply the Compare Feature as you create it.

In this documentation, we have used a clients website to illustrate the features.

WooCommerce Compare Products

Step 2 – Creating Compare Attributes

Now that we have activated the Compare Products feature on the product category, the next step is to take the list you made and the items as Product Attributes.

  1. Go to the Product > Attributes menu.
  2. From the list you created in the planning stage, now add each item as a Product Attribute.
    • Tip 1. The name you enter here is the Comparision Field Title that Customers see in the Comparison Data set on the Product Page Tab and the Comparision table.
    • Tip 2. Keep the Attribute name short and concise. The WooCommerce attribute slug length allowed is limited to just 28 characters.
    • Tip 3. If you have a longer Attribute name copy and paste it into the Slug field and it will automatically be shortened to 28 characters. If you don’t do that and the name is longer than 28 characters – the Attribute creation will fail.
  3. Assign the Attribute to the Appropriate Compare Category. You will see that a new section has been added to the Product Attribute Creation / Edit Menu – “Attribute Comparision Data” The first field is “Select Categories”. By assigning this attribute to a Category it becomes part of that category’s Compare Data Set.
    • Tip!. An attribute can be assigned to an unlimited number of Product Categories. For example if you are selling items that you want to show ‘Warranty’ you can create the ‘Warranty’ Product Attribute and assign it to all Product Categories that have the compare feature activated.
  4. Set the Compare Data Input Type. Chose the data input type from the dropdown list. This section is designed to make your entry of the Comparision Values much faster and more flexible.
  5. Attribute Unit of Measurement (Optional). Again this is a data entry time saver.
WooCommerce Compare Products

Step 3. Creating Attribute Terms.

Adding attribute terms depends on the Input Data Type you have set for the attribute. The dropdown list is self-explanatory.

Adding attribute terms

No Terms Required:

Input Text (Single Line) & Text Area (Paragraph Text Box) – no terms required, as you enter text in the fields.

Terms Required:

Check Box (Multi-Select), Radio Buttons (Single Select), Dropdown (Single & Multi-select). All 4 require terms to be entered. This is a time-saving feature and also keeps the data consistent.

Colour – Attribute terms shown in dropdown, single select. See this section on how to use it.

Image – Attribute with text field to add Image url.

See the screenshot of a Comparison data set where a Product Attribute ‘Power Source’ has Input Data Type – Radio Buttons set. You can see the 3 terms that have been set for the ‘Power Source’ Product Attribute are ‘2 Stroke Petrol Engine’, ‘240Volt Electric’ and “Battery”. When completing the Comparision Data set on the product, the site Admin just needs to select 1 checkbox – saves having to type the data each time and keeps the data consistent. The rest of the data fields in the screenshot are data input type, Input Text (Single Line) or Text Area (Paragraph).

WooCommerce Compare Products

And this is how that would look on the Compare Table

WooCommerce Compare Products

In our example will create a new attribute and assign it to a category named Chain Saws with the data input as Radio button ( Attribute Terms show as single select checkboxes ) and 2 terms : Yes and No. You will see in the video that on our site there are many specifications, each specification/attribute can be assigned to an unlimited number of categories.

If an Attribute has terms these are auto created as the newly created Compare Features Input Values.

WooCommerce Compare Products

Step 4. Sort Compare Attribute Order

Now that you have taken your list and created each item on it as a Product Attribute, Assigned to at least 1 compare category and added terms (if required) Go to the WC Compare > All Product Categories menu. There you will find all categories that have the Comparison Feature turned ON. On the Product category listing that you have just assigned the Attributes to, open it and you will see all the attributes, you can use drag and drop to sort the order they appear in.

You can also manage all other features and functions of Compare categories and attributes from this menu.

WooCommerce Compare Products

Adding the Compare Feature to a single product

Now that you have the Compare Data set for a Category, you can go ahead and add the compare feature to all products in that category, and add the comparison data.

On first install the Compare Attribute Fields will be found on the right sidebar of the page editor. From default the compare feature is turn OFF, giving you the flexibility to assign certain products to the compare table. The widget can be grab and drop anywhere on the editing page. After placing, turn it ON and Select a Compare Category for this Product. If we select Chan Saws will see the attribute created in earlier step and assign it to Chain Saws category.

WooCommerce Compare Products

In order to add multiple specifications to the same product and show on compare front end table just assign the category to the wanted attributes and complete the fields with the desired specifications. In our demo are chain saws products but instead can be phones, cars, machines, clothes etc…

WooCommerce Compare Products

Do this process to all the products that you want to have the compare products feature.

WooCommerce Compare Products
A demo of a product compare page table with many attributes/specification. Will get later on doc on how to customize this.

Manage Compare Products

The next menu from the Woo Compare plugin setting is the Products Manager. When the Compare Products tab is opened it automatically fetches all active products and Variations direct from the WooCommerce products database for easy on page management of the Compare feature.

Pop-up manager window. From here you can easily Activate / Deactivate the Compare feature for this product and setup the attributes fields. Activate – Compare Button shows on the product on the front end – Deactivate and the button is hidden.

Woo Compare Style and Settings

This WC Compare > Settings and Style menu divides the front end display of the product comparison feature in sections that allows you to:

  • Set the style and layout of the compare feature on your product pages.
  • Set the style and layout of the Compare Widget.
  • Set the style and layout of the Compare feature on product cards.
  • Set the style and layout of the Comparison table page.

Product Page Settings

From here will gonna setup and style what will be display on products page front end. If this option is turn On, will show a button that will allow to add the product to the Compare Specification Table and a link that will redirect to the compare table page.

Compare Button / Hyperlink Style

Customize the Add to Compare button/hyperlink.

Button / Hyperlink Position

View Comparison Table

As default the View Compare Link is On.

Product Page Compare Tab

This will add or remove the Compare attribute/specification from the Attributes Tab.

Compare Widget

This widget will add the compare products on the sidebar. When a user clicks on the Compare this button on a product the product is auto added to the Compare sidebar Widget or Compare basket. It have many benefit to use it.

The Compare Product Widget is fully customizable being able to integrate perfectly with your theme design and functions.

From the Widgets menu add the Woo Compare Widget to sidebars / widget areas where users can see it as they add items to their list of item to be compared.

All the settings for this feature are found on 3th tab of the WC Compare > Settings and Style.

The first option – Woo Compare Widget Title have 2 options:

  • Themes Widget Title Style – Turn this option On and the Title will inherit the theme style
  • Custom Widget Title Style – Using this option you can customize the Title of the Compare widget. There are many options for style like: Title Font, Title Container Alignment, Title Container Width, Title Container Padding, Title Container Margin, Container Background and Bording.

Compare Item Count Style

Remove Single Item Icon & Empty Items Text

Compare Items Button / Hyperlink Style

Customize the button that redirect to the Compare Product Tab Page. Same like the others button you can have options for font, color, shadow, custom text for the button or hyperlink etc..

‘Clear All’ Items Style

Style the hyperlink/button that clear all the item bulk. It can be a button or a hyperlink, both fully customizable.

Product Image Thumbnail Style

Style the thumbnail image of the comparted product.

Product Cards

Turn On and the Compare Feature will be applies to all product cards on the Shop, Product Category and Product Tag page.

Position on Product Cards

Compare Button / Hyperlink Style

‘View Compare’ Link

Comparation Page

From here we style and setup the page that hold the comparation products. This is where the users do their product comparison.

A demo of a compare product page of a live website.

Comparison Page Setup

Comparison Page Header

Now let’s start styling the table comparation page. Will gonna start with the header, so the page will match with your website design.

Comparison Page Body

Now that we have our header done it’s time to style the body of the page.

Table Style

Style how the table of the product specification looks like.

Table Fonts

Select the fonts that you want to use for the compare table. The fonts can be configure for: Product Name, Table Cells and Row Title.

Empty Table Cells Style

When a attribute will have no data insert for a product the cell it will still show. You can customize a default message or leave it empty. Select the text font and the color background of the cell.

Product Prices On Compare Table

Bellow and at the end of the table are the Prices rows. Choose the display position and play with the style till you got the desire look.

Add to Cart Feature

Directly from the Product Comparison page the client can add the selected product to cart or make a enquire. Like the others buttons of this plugin this can be customize with background color, custom fonts, choose the alignment of the button/hyperlink with a custom text. Also you can add a custom Added To Cart Success Icon.

View Cart Hyperlink Styling

When the client make a action and add to cart a product a text will show from where they can be redirect to Vie Cart page.

a3rev Docs

Print Comparison Page Feature

On the right corner of the page will have the Print button. On those tabs you can turn Off this feature, add a custom Message Text and choose of to be a hyperlink or a button. Both can be styles as need it.

Close Window Button / Hyperlink

To close this window tab customize the button or the hyperlink text. that can be found on the top right corner of the page.

Colour Fields Type

In the beginning of the doc it’s mention that you can add colour fields to the compare product table. In this section will see how to use  Input Data Type > Colour. This Input type is working same like others, if you don’t know how to setup please check this section .

You can create a new Attribute Comparison Data with this field type or edit a existent one and highlight specific fields in comparison table.

In our example we will edit a already create attribute, changing it from a text field to a colour input type. This attribute have 4 terms, to make it easier for demo purpose we select them as colours. We assign each term (colour) to 4 products witch will compare.

Step 1: Choose the Attribute and Terms Compare data Input type -> Colour.

add colour for attributes

Step 2: Configure the terms of the selected attribute by applying color to both the text and background.

Step 3: Now, we simply need to choose the appropriate field for each product’s terms.

Step 4: See the changes on product compare table.

Image Fields Type

Same as the others Input Type the Image is to populate a attribute term, in our case with a image. The process is very simple. In our example will gonna edit the “Brand” attribute, adding images for some terms that this attribute have.

In our demo the radio buttons will be replace with images. Like you see in our example, this product have select as input field the radio buttons and on comparation table they show as text.

Step 1: Choose the Attribute and Terms Compare data Input type -> Image. You can edit a existent attribute or create a new one and apply the Image data type with the selected category.

Step 2: Next, we simply need to input the image URL for the desired products. When the input type is set as “Image”, in the product editor a new field will appear allowing you to enter the URL for the desired image.

Step 3: See the images you add into the comparation table.


Compare Button is not showing.

On the Settings tab set the ‘Button Position relative to Add to Cart Button ‘ to ‘Below’. If you have the Catalog Visibility premium extension activated you must do this or the Compare Button will not show.

Compare Pop-up window won’t open.

On the Settings tab change the  ‘Compare Fly-Out Type’ from Fancybox to Lightbox. This normally happens when you are not using a WooTheme. Some theme developers use Lightbox as their theme default pop-up tool and it blocks the default WooCommerce fancybox tool from working.

Comparison Window not showing any products.

This issue was raised in support ticket #14588. If you can see the items in the comparison pop-up window or new page table whilst your logged in, but in other browsers as a logged out user the comparison window shows not products – this is a caching issue. If your site is hosted on WP Engine you need to contact their support and ask them to exclude /product-comparison/ from the caching on their Varnish layer. See the reply from the WP Engine support team #14842

Thanks to Clint DeBoer for working with us on this one to find the issue.

Go Back to Top