Installation
To install Compare products:
- Download WooCommerce Compare Products Extension PRO Version or Lite Version
- Upload the woocommerce-compare-products folder to your /wp-content/plugins/ directory
- 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.
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:
- Start with a Single Product Category. Products in any store that have similarities are grouped into categories.
- 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.
- 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.
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.
- Go to the Product > Attributes menu.
- 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.
- 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.
- 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.
- Attribute Unit of Measurement (Optional). Again this is a data entry time saver.
Image Legend:
1. Select Categories – An Attribute can be assigned to any Product Category that is activated for Product Comparisons. Attributes show on the comparison table as the Comparable Product Attributes.
2. Attribute and Terms Compare data Input type – Use these fields to determine how this Attribute will display its compare data. Text input fields are for adding custom compare data and ignore the Attribute Terms or set to show the Attributes Terms as single or multi select Compare data options that are quick and easy to set for each product. Input types are designed to give the data input flexibility and speed up data entry.
3. Attribute Unit of Measurement – data-content=”e.g kgs, mm, lbs, cm, inches – the unit of measurement shows after the Attribute name in (brackets). If you leave this blank you will just see the Attribute name.”
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.
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).
And this is how that would look on the Compare Table
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.
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.
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.
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…
Do this process to all the products that you want to have the compare products feature.
Image Legend:
1. Woo Compare Settings – Here are the most important settings for our plugin. On default the Category & Attribute will be open.
2. Categories – All Product Categories that have the Comparison Feature turned ON are auto shown on this panel. Each Category shows as a floating bar with the category Name.
3. Dropdown Arrow – Use the dropdown arrow on each category to view all Product Attributes that have been assigned to that Product Category.
4. Shortcode links – Easily access the Category and the Attribute page. Also you can create comparison table Section Titles and drag and drop into place.
5. Attributes – Easily control all the specifications assign to the category. Edit or remove any attribute.
6. Drag and drop – To sort the Attributes display order in each category. This is the order that Attributes will show on the front end in the Comparison table.
7. When there are no features assigned to a category it auto shows that message. When features are assigned that message does not show.
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.
Image Legend:
1. Products – By default it shows parent products to speed up initial loading. Click the Show Variations check box to reveal all product variations.
2. Product Categories are displayed for easy reference.
3. The Compare category that the products is assigned to is displayed for easy reference.
4. See at a glance if the Compare feature is activated or deactivated for any product and its variations.
5. Edit – Click the edit link and the Compare feature manager for that product or variation opens in a pop-up screen – *Note – this is a PRO version feature. Lite version users must visit the actual product page to assign a product and its variations to a Compare category and set the feature fields.
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.
Image Legend:
1. Plugin Framework Global Settings – Open this panel and you will can Check For New Plugin Version, Customize Admin Setting Box Display, connect to Google Fonts API or Clean up on Deletion.
2. Getting Started – Here you will find a Brief Overview of the Compare Product plugin.
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.
Image Legend:
1. Compare Type – Select to display from button or a hyperlink.
2. Added to Compare Icon – Upload a 16px x 16px image, support .jpg, .pgn, .jpeg, .gif formats.
3. Button Text – The default text is: Compare This*, but you can change it to your needs.
4. Button Font – Select a font and font proprieties for the button.
5. Button Padding – Padding from Button text to Button border.
6. Background Colour – Select the button colour.
7. Button Border – Add a border for the button.
8. Button Shadow – Style the button by adding shadow to it.
Button / Hyperlink Position
Image Legend:
1. Button / Hyperlink Position – Position relative to Add to Cart button location. It can be Above or Below
2. Button Margin – Controls how far away the button is from other elements.
3. Custom Position – ON to deactivate default button position settings created by the plugin. Then use this function to manually position the Compare button on product pages “<?php if ( function_exists('woo_add_compare_button' ) ) echo woo_add_compare_button(); ?> “
View Comparison Table
As default the View Compare Link is On.
Image Legend:
1. View Compare Link – Deactivate or activate this function.
2. View Compare Type – Choose from a hyperlink text or a button to be display. Same as Add To Compare.
3. Hyperlink Text – The default text is: View Compare →, but you can change it to your needs.
4. Hyperlink Font – Select a font and font proprieties for the hyperlink.
5. Hyperlink Hoover Colour – Select the colour when a pointer is hovering over the text.
Product Page Compare Tab
This will add or remove the Compare attribute/specification from the Attributes Tab.
Image Legend:
1. Compare Attributes Tab – Turn On/Off this tab.
2. Compare Tab Position – Select the position of the Compare Attributes tab on the default WooCommerce product page Nav bar. Products Compare feature list shows under the tab.
3. Compare Tab Name – Change the tab name. By default is: Technical Details.
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
Image Legend:
1. Count Number Font – Add a custom family font.
2. To show before and after the number
Remove Single Item Icon & Empty Items Text
Image Legend:
1. Remove from widget Icon – Remove and add your own custom icon to show when want to remove a product from the compare list. Upload a 10px x 10px image, support .jpg, .pgn, .jpeg, .gif formats.
2. Nothing to Compare Text – When there is no product to compare a text will show up. Customize the text as the style of it.
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.
Image Legend:
1. Product Thumbnails – ON to show Product Thumbnails when items added to the Compare Widget.
2. Thumbnail Width – Default is 32px -change it if it’s need.
3. Thumbnail Position – Position in relation to Compare Items in widget.
4. Thumbnail Container – Set the background colour.
5. Container Border – Add a border to the thumbnail container.
6. Border Shadow – Add a shadow to the thumbnail container.
7. Border Padding – Space between the image and the container border.
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
Image Legend:
1. Vertical Position – Position relative to Add to Cart Button. Tip: Change position if Compare Button/Link does not show.
2. Button Margin – Controls how far away the button is from other elements.
Compare Button / Hyperlink Style
Image Legend:
1. Compare Type – Select to display from button or a hyperlink.
2. Added to Compare Icon – Upload a 16px x 16px image, support .jpg, .pgn, .jpeg, .gif formats.
3. Button Text – The default text is: Compare This*, but you can change it to your needs.
4. Button Font – Select a font and font proprieties for the button.
5. Button Padding – Padding from Button text to Button border.
6. Background Colour – Select the button colour.
7. Button Border – Add a border for the button.
8. Button Shadow – Style the button by adding shadow to it.
‘View Compare’ Link
Image Legend:
1. View Compare Type – Choose from a hyperlink text or a button to be display. Same as Add To Compare.
2. Hyperlink Text – The default text is: View Compare →, but you can change it to your needs.
3. Hyperlink Font – Select a font and font proprieties for the hyperlink.
4. Hyperlink Hoover Colour – Select the colour when a pointer is hovering over the text.
Comparation Page
From here we style and setup the page that hold the comparation products. This is where the users do their product comparison.
Comparison Page Setup
Image Legend:
1. Open Compare Table in – There are 2 options to open the Compare Table page: Pop-up Window and a New Tab Window ( we recommend to use this one if concerned about browser pop-up blockers ).
2. Comparison Page Shortcode – A ‘Product Comparison’ page with the shortcode *[product_comparison_page]* inserted should have been auto created on install. If not you need to manually create a new page and add the shortcode. Then set that page so the plugin knows where to find it.
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.
Image Legend:
1. Header image – Upload an image with formats .jpg, .pgn, .jpeg. Any size.
2. Background Colour – Select a color for the header background.
3. Bottom Border – To make a difference between header and page body you can add a border at the bottom of the header section.
Comparison Page Body
Now that we have our header done it’s time to style the body of the page.
Image Legend:
1. Background Colour – Select the page body background.
2. Comparison Empty Window Message Text – The default message is: You do not have any product to compare. Change it as you wish.
3. Message font – Setup a font and style it for the Empty Message Text.
4. Text Alignment – Align the text for the Empty Message Text.
Table Style
Style how the table of the product specification looks like.
Image Legend:
1. Table Heading Background Colour – Choose a color for the first row of the comparation table.
2. Alternate Rows Background Colour – One way to improve the readability of large tables is to color alternating rows. See bellow image.
3. Table Border – Get a border around your table by using this settings.
4. Table Row Padding – Row padding is the space between the cell edges and the cell content.
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.
Image Legend:
1. Empty Cell Text – Add a custom text or ;eave it empty and nothing will show.
2. Empty Cell Font – If you add a text then you can style the font from here.
3. Cell Background Colour – Style the empty cell by adding a colour for the background.
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.
Image Legend:
1. Product Price – Turn On or Off the product price feature.
2. Price Font – Select a font for the price text.
3. Price Alignment – Position the price text left, center or right.
4. Product Price Position – Display where the price to show: Top and Bottom, Only Top or Only Bottom.
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.
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.
Image Legend:
1. Close Window Type – Choose if t have a button or a hyperlink.
2. Button Text – The default text is Close window – change it if it’s need.
3. Button Font – Select a custom font for the button/hyperlink.
4. Button Padding – The space between the text and the inside button border.
5. Button Style – Customize the button look.
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.
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.
Troubleshooting
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.