To install Compare products:
- Download WooCommerce Compare Products Extension
- Upload the woocommerce-compare-products folder to your /wp-content/plugins/ directory
- Activate the ‘WooCommerce Compare Products’ from the Plugins menu within WordPress
When WooCommerce Compare Products is installed and activated it auto creates a Compare Products admin section on your WooCommerce site.
1. To access the Compare Products admin settings go to your wp_admin dashboard, WooCommerce > Product Comparison. The Compare Products admin area will open and you will see 6 tabbed admin pages.
2. Features Tab – Where you set up and manage Compare Categories and Compare Features
3. Products Tab – Adding the compare feature to your entire catalog is quick and easy with Compare Products Express Manager.
4. Product Page Tab – All layout and custom settings for the compare feature on single product pages.
5. Widget Style tab – All setting for the layout and style in the Compare Widget.
6. Grid View Style Tab – All settings for the layout and style of the Compare feature on Grid View pages (Store, Product Category and Product Tag archive pages)
7. Comparison Page Tab – All layout and style settings for the Comparison page and table.
Step 1 – Create Compare feature sets
First thing to do when you install WooCommerce Compare is to create the feature sets. These feature sets are then assigned to products. You do this by
- A. Creating Compare Categories.
- B. Creating Compare features and assigning those features to one or more categories
- C. Assigning a Compare category to each product.
The plugin does a lot of this work for you on install. When you install the plugin it auto creates:
- All existing Product Categories are auto created as Compare categories.
- All existing Product Attributes are auto created as ‘Un-Assigned Compare Features’
- If an Attribute has terms these are auto created as the newly created Compare Features Input Values.
The image below is an illustration of what you see on the Features tab when you first install the plugin. See the notes below the image for a detailed explanation.
1. ‘Add New’ – Click this button to add custom Compare Categories and Compare Features.
2. ‘Search Feature’ – built in features search makes finding Compare features that you have created and assigned to a Compare category fast and easy.
3. ‘Un-Assigned Features’ – On install the plugin auto creates all existing Product Attributes as Compare features and shows them at the top of the page.
4. Assign or Delete – The First thing to do is to assign each feature to a category or a number of categories or in not required then delete it. To assign a feature to a category click the edit link.
5. Bulk Delete – Check features that are not required and click the delete button.
6. Manage Compare categories and features – this is where you manage your categories and the features assigned to them.
7. Each Category shows as a floating bar with the category Name. Use drag and drop to manage the order the categories appear on the page. When there are no features assigned to a category it auto shows that message. When features are assigned that message does not show.
Assigning Features to Categories
Create feature sets by assigning Features to categories. See the image below and the notes below on each feature.
1. When you click on the Edit link on an Un-Assigned Feature it opens the edit feature in a new page.
2. Feature Name : This is the name that shows in the left column of the Compare table e.g. Colour, Size etc.
3. Feature Unit of Measurement : example, Kgs, Lbs, cm, meters
4. Features Input Type: Here is where you select the value input type. There are 6 input types. Choose the one that suits the value set. These input types make for faster data entry.
5. Input Type Options – when you select Check Box, Radio Buttons, Drop Down or Multi-Select this field shows to enter the variables that are available for selection.
6. Assign Feature to Categories. Click in the box and a drop down of all Compare categories shows. Select Categories you want to assign this feature to.
7. Save. Click the save Button and the feature is assigned to the category and the page defaults back to the features tab.
Managing Category feature Sets.
The image below shows you how to manage features once they are assigned to a category.
Once Features are assigned to a Category the No features message no longer shows. To view the features in a category click the Gray down arrow that now shows on the right end of the category bar (shown to the left of the number 4 in the image above). When you click the arrow the features appear in a drop down table.
Note: Once you have assigned each feature to a category the ‘Un-Assigned Features’ table does not show. Each time you add a new Product Attribute it is auto created as an ‘Un-Assigned’ feature and shows in the table at the top of the page. Note – Attribute terms are not auto created as feature values.
1. Sort the order the categories show on the features page by drop and drag.
2. Compare category name.
3. Edit / Delete. – Edit the Category Name or delete this category.
4. Gray Arrow – Open / Close the Category features table.
5. Features order – Sort the features order with the category by drag and drop – the order here is the order the features show in the comparison table.
6. Feature Name –
7. Input Type – allows you to see the input type set up for the feature.
8. Edit / Remove – Edit the feature or remove it from this category. If the feature is not assigned to any other category it will auto show in the ‘Un-Assigned’ features table at the top of the page.
9. No Assigned features – see at a glance that this category has not assigned features yet.
Create Custom Categories & Features
Compare Products gives you the total flexibility to create your own custom Compare categories, features and feature values completely independent of your WooCommerce Product Categories and Attributes and the Attributes Terms. See image below.
1. To create a new Category or Feature click the Add New Button at the top of the page.
2. Add Compare Categories.
3. Category name – Type in the new category name – must not already exist. Don’t worry the plugin will tell you if there is already a category with that name when you click the create button.
4. Click Create – and the new category is created and the page reloads to the features tab page with the new category loaded to the top of the list of categories.
5. Add New Compare Feature –
6 . Feature name – Type in the new Feature name – must not already exist. Don’t worry the plugin will tell you if there is already a category with that name when you click the create button.
7. 8. 9 Add a new feature – works exactly the same as editing a feature. See note on items 7 to 9 above in the Assigning Features to Categories section.
10. Click Create – and the new feature is created and the page reloads to the features tab page. You will see the feature has been added to the bottom of the list of features in each category it was assigned to.
- After activation Compare Listens to your Product Categories and Sub categories and whenever a new Product Category or Sub Category is created, then Compare auto creates a => Compare Category of the same name if none already exists.
- Compare listens to your Product Attributes and whenever a new Product Attribute is created, then Compare auto creates a => Compare Feature of the same name if none already exist.
After activation all you have to do is assign your auto created Compare Features (created from your Product Attributes) to Compare Category/s (auto created from your Product Categories). Activating the Compare Features on your products is a breeze using the Compare Express Products Manager*. With a few clicks assign your products to a Compare Category and select the Comparable Features data to show for that product and activate.
Step 2. Assign Products to a Compare Category.
Now you have your features sets set up all that needs to be done is assign each product to a compare category.
You do that on the Products tab with the
Compare Products Express Manager
Click on the Products tab and you’ll see the Compare Products Express Product Manager. The Compare extension automatically calls all of your published products from the WooCommerce database.
You can see at a glance if products have the Compare Feature activated and if so what Compare Category / s the product is assigned to.
1. Products tab – 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.
2. By default the Express manager only shows parent products when activated to speed up initial loading. Click the Show Variations check box to reveal all product variations.
3. Product variations show as indented in the rows under the parent product.
4. Product Categories are displayed for easy reference.
5. The Compare category that the products is assigned to is displayed for easy reference.
6. See at a glance if the Compare feature is activated or deactivated for any product and its variations.
7. 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.
8. Pop-up Express manager window.
9. Activate / Deactivate the Compare feature for this product. Activate – Compare Button shows on the product on the front end – Deactivate and the button is hidden.
10. Select a Compare category from the drop down to assign this product to.
11. As soon as a Compare category is selected in the drop down that Categories Compare Features show below it on the pop-up window.
12. Setting Feature fields as Check boxes, radio buttons or drop downs makes adding the Feature field data much faster.
13. The extension by default creates all Feature Fields created from a Product Attributes terms as multi select check boxes.
14. Once all Feature Fields data has been added clicking the Update button closes the pop-up window with the Products Express manager page auto updated.
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 looks like this.
Compare Basket features:
- Widget is auto added to your sidebar when the extension is activated.
- Shows the number of items in the Compare basket.
- Shows each Product by title
- Title is a click-able link back to the products page.
- Each product has an X aligned to the right of the product that allows the user to remove it from the Compare basket.
After a product is added to the Compare basket.
- A ‘Clear All’ link shows at the bottom left which allow users to empty the basket in a single click.
- Compare button which is aligned to the bottom right shows.
- Widget auto adopts your themes style, except for the Compare Button that must be manually styles – see Settings Tab.
- Products are added to the widget by Ajax. This means the page does not re-load each time a product is added or removed from the Compare basket.
- When products are removed from the pop-up screen selection they are auto removed from the basket.
- Basket holds users current selection until user closes the site in their browser.
If the Widget does not automatically show in the sidebar of the theme you are using, on your wp_admin dashboard go to Appearance > Widgets and find the Woo Compare Widget. Drag and drop it into the sidebar and the position that you want it to show in. Give the widget a title and Save.
1. WooCommerce Compare Products Widget.
2. Drag and drop the widget into any Sidebar Widgeted area to create your Compare basket that products are added to. Add a Widget title and save .
3. The Compare Basket in sidebar. Shows the title you added, the products added count and until products are added a message saying there are no products in the basket to compare.
Product Page Compare navigation tab
You can select to create and position a Compare Product Features tab on your product pages. This tab will show the Compare Features and their values for the product in your themes table style. The table of features and values is the same information that the user sees when the product is shown the Compare Pop-up. If the product has variations the tab will show a separate table for each variation that the Compare feature is activated on.
1. Create a Compare Product Features Tab on your products page. Post ion it where you want in relation to the existing tabs and give it a title.
2. Variable products show the name of each attribute with a table of features and values for each product variation that has the Compare feature activated.
3. Compare Features for this product. The plugin uses your Themes table styling.
4. Compare features values.
Lite Version Product Activation.
Lite version users are able to activate the Compare Feature via each products edit page. The process is exactly the same as described above using the the Express Products Pop-up window except it has to be performed from the products edit page.
Lite Version Compare Variations
Lite version users can activate and manage product variations from the products edit pages. The Compare edit feature for each variation can be found in the products variations edit section. See image below.
1. Variations tab on products edit page.
2. Price – If you are activating the Compare Products Feature on a variation and you want the Price to show in the Compare pop-up you must add the variation price here.
3. Compare Feature for this variation. Activate > Assign this variation to a Compare category from the drop down and then the Feature fields for that Compare category will show.
If activating Compare feature on variations you must activate the Compare feature on the parent product. You do not need to add any Field data for the parent product because it is the variations that will be compared not the parent.
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.