WooCommerce Compare Products, the one and only Product Comparison Extension for WooCommerce just got even better with the release of V2.0.6.  This Upgrade is a Major feature upgrade and is timed to co-inside with the release of WooCommerce v2.0.

The WooCommerce upgrade features the new WordPress pop-up tool PrettyPhoto. This was a problem for us as the Compare Products extension already supported 2 pop-up tools ‘Fancybox’ and lightbox’.

The Challenge was that we wanted to add a new feature to completely re-invigorate the way that users viewed the Product Comparison tables.  That feature we wanted to add was ‘Fixed Features Title Column.’  This feature enables users to easily view and compare 3 + products in the pop up window by making the First Column of Feature in the table fixed and allowing all the products to scroll under the feature titles.

We ran into a real problem here. What we found was that adding a 3rd pop-up script to the extension and trying to make all 3 pop-ups show the ‘Fixed Column Feature’ made all 3 scripts buggy and rather unstable.  The solution we came up with was to get rid of all 3 pop-up scripts and open the table in a new browser window.

That was easy enough – BUT – we then found that the only way to show the table with the ‘Fixed Column Feature’ was to show it in an inner container. That in itself was relatively easy – BUT – and an inner container has its own set of horizontal and vertical scroll bars and the window like all windows has horizontal and vertical scroll bars. Looked terrible and is confusing to users which defeated the desired result of giving the user a great Product Compare experience.

We went looking for an open source script that would support showing the table without using an inner container. In other words using the window scroll bars to control the Comparison table view. What we found that no one has ever been able to build it though plenty have tried. Eventually after 4 days we got it and it makes for a very beautiful Comparison table view. See this quick video I made that shows you what I mean.

You can try it for yourself here on the site I made the video on. The Free Lite version available from WordPress has the 3 pop-up tools without the Fixed Features Title Column feature and it works fine – it was adding that feature that caused the problems.

Using a window to show the Comparison table in the Pro Version also offers Pro version License holders these added advantages.

• Allowed us to removed a net of about 3,500 lines of code from the plugin making it much lighter.
• Using a browser window means that the pop up has  Excellent browser compatibility – tablets, mobiles and legacy browsers (even IE)
• We were able to add the option of opening the Comparison table either on screen or by opening a new window.
• Because each new window is a new URL it allows us future scope to add sharing and saving capability to each product comparison.
• Opening in a window allowed us to completely rework the Print Script and add style to the print page.

Here is a full list of features added in version 2.0.6

* Feature: All plugin code updated to be 100% compatible with WooCommerce version 2.0 and backwards.
* Feature: Removed Compare pop-up fly out powered by Fancybox and Lightbox tools and replaced with Product Comparisons opening in a new browser window. WooCommerce Version 2.0 uses the new WordPress PrettyPhoto as the pop-up tool and in testing we found supporting 3 pop-up scripts, PrettyPhoto, Fancybox and Lightbox was very buggy and troublesome. So we have removed all 3 pop-up scripts and replaced with open in browser window. The result is around 4,000 less lines of code in the plugin and a beautifully robust comaparison result presentation.
* Feature: Added 2 show Comparison in new widow options. Option 1. Show the product Comparison in an on-screen pop-up window or Option 2. Show Comparisons in a new window.
* Feature: Added Fixed Features Title column. This means when more than 3 products are being compared in the pop up window or on-page comparison the products scroll left under the Features Title column – this means the user always can see what product features are being compared, beacuse the are fixed while the products and each feature values scroll under them.
* Feature: Added Comparison Table scrolls horizontal and vertical via the window scrollers and not by scrollers on an inner container. This is a great UI enhancement as it does away with inner containers – no more having to use the window scrollers to get to the inner container scroll bars which was confusing and messy.
* Feature: Completely reworked the Print Product Comparison function. The Print function now works beautifully with added print style. Prints the entire tall of 3 products Comparison columns regardless of the tall of the columns.

Very big upgrade but a huge step forward for the extension.