WPEC Compare Products

Instillation

To install WP e-Commerce  Compare Products:

  1. Download the WP e-Commerce Compare Products plugin PRO Version Lite Version
  2. Upload the wp-ecommerce-compare-products folder to your /wp-content/plugins/ directory
  3. Activate the ‘WP e-Commerce Compare Products’ from the Plugins menu within WordPress

Overview

Compare Products uses your existing WP e-Commerce Product Categories and Product Variations to create Compare Product Features for all your products. A sidebar Compare basket is created that users add products to and view the Comparison in a Compare this pop-up screen.

Products in the pop-up screen can be added to the shopping cart (if the product has that capability) and there is a hard copy print results capability.

Admin Settings

When WP e-Commerce Compare Products is installed and activated it auto creates a Compare Products admin section on your WP e-Commerce site. It looks like this

Image Legend.

1. After installing and activating the WP e-Commerce plugin then the WP e-Commerce Compare Products plugin you can access your Compare Products admin panel by going to your wp_admin dashboard, Products > Compare Products where you will find 3 tabbed compare admin sections.

2. Settings tab opens as the default admin page.

3. Features tab

4. Products tab

Content Created On Install

When you install and activate Compare Products it automatically:

  • Creates all of your existing Product Categories and Sub Categories as => Compare Categories
  • Creates all of your existing parent Product Variations as => Comparable product features

The image below shows you how this looks when you install and activate WP e-commerce Compare Product.

Image Legend.

1. In your WordPress Admin Dashboard go to Products > Compare Products.

2. Click on the Features tab

3. Lite Versions users will see a Master Category is auto created and all of their Product Variations are assigned to that category as Compare Features. If  the PRO version is installed first the Master category is not created.

4. Compare auto creates all of your Product Categories and Sub categories as Compare Categories*. Compare Categories give you great flexibility in grouping like products with similar features together to produce really relevant and easy to read product feature comparisons.

5. PRO version users will see that Compare auto creates all of their Product variations as ‘Un-Assigned’ Features ready to be assigned to the appropriate Compare category. The plugin would do this automatically but in the WP e-Commerce data base there is no relationship between Product categories and Product Variations.

Compare Products gives you the total flexibility to create your own custom Compare categories*, features and feature values completely independent of your WP e-Commerce Product Categories and Variations.

* Note: Compare Categories is a Pro Version feature. The Lite version creates a Compare Master Category that all Compare Features are auto assigned to. Lite version users will see all of their Product Categories created as Compare Categories on the Features tab, but not activated. Upgrade to the PRO version at any time to activate this feature.

Smart Sync

  • 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 Variations and whenever a new Product Variation 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 Variations) to Compare Category/s (auto created from your Product Categories). Activating the Compare Features on your products is a breeze using the Compare Products Express 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.

* Note: Compare Products Express Manager is a Pro Version feature. Lite version users can see the feature under the Products tab. The ability to Edit the Compare feature on each product is not activated. Lite version users can only edit the products compare features from each products edit page. Upgrade to the PRO version at anytime to activate this incredible time saving feature.

Compare Sidebar Widget

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 plugin 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 product 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 allows a user 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.

Manually adding side bar widgets

If the Widget does not automatically show in the sidebar of the theme you are using or you want to move or add the widget to other widget areas and sidebars, on your wp_admin dashboard go to Appearance > Widgets  and configure your preferences.

Image Legend.

1. WPEC Compare products Widget that can be found in your widget menus. The widget is multi use meaning you can create as many compare baskets as you desire. Each created Compare basket is independent of every other Compare basket.

2. Drag and drop the Compare widget into any widgetized area. he only setting is the Widget title. Leave blank for no title. Click Save and the Compare  basket is published on the front end.

3. The compare basket shows with all features and the title you have set.

Compare Pop-up Window

The Compare pop-up window is the core feature for front end users. This is where they do their product comparison. We use a pop-up window for the Comparison rather than a web page because:

  1. We do not want the user to be taken away from the product page they are on.
  2. The pop-up window allows us to display an unlimited number of products side-by-side whereas a web page limits it to about 3 products.
  3. The pop-up window features adds to your sites wow factor for the users.

The user activates the Compare pop-up window by adding products to the compare sidebar basket and clicking the Compare Button.

See the graphic below for just some of the Compare pop-up window features that are auto created by the plugin.

WP e-Commerce Pop-up Compare Screen

Image Legend.

1. Customize the pop-up with your own image / header logo.

2. Print hard copy capability.

3. X to remove unwanted products from the pop-up

4. Product image thumbnails shown scaled to size.

5. Add To Cart functionality from the the pop-up window

6. Comparable Products Features table.

7. Each Products Comparable Products Feature data fields in the table

8. Inner Container vertical scroll allows you to show long tables of compare Features and data

9. Inner Container horizontal scroll allows the user to add unlimited products to the Compare pop-up

Settings tab

The settings tab is the default landing page when you open the Compare Products admin centre. It has 3 sections that are used to style the front end of the plugin. This is what you will see.

Image Legend:

1. Settings Tab

2. Compare Fly-out Window Setup

3. Product page Compare Buttons

Styling the Compare Pop-Up Window

To edit the default style and layout of the Compare Pop-Up window go to you wp_admin dashboard, Products > Compare Products > Settings. Here you will find all of the setting you need to style the Compare Pop-Up window. There are Tool Tips and help text on the Settings page, but here is some additional help notes and set up Tips.

Add Fly-Out Header Image – add your logo or an image. Upload the image to your Media gallery and copy and paste the image URL in the box provided. If the image is not as wide as the screen it is aligned to the centre.

Tip: Keep the tall of your image as small as possible as it takes up valuable room in the pop-up screen.
Tip: Add an image that includes your contact details, phone, email for example. When the user prints the compare results they will see those at the top of the page.
Tip: Set the ‘Fly-Out Inner Container Height’ at least 50px less than the ‘Compare Fly-Out Height’. Doing this will ensure that the users can always see the inner container bottom horizontal scroll bar. If you don’t they will have to know to use the outer container vertical scroll bar to see it. If they don’t know that it is there they cannot horizontal scroll to see all of the products they are wanting to compare, if they have more than 3.

Compare Buttons / Text links

The next section on the Settings tab is ‘Product Page Compare Buttons’ . here you set the Compare button position relative to the Add To Cart Button and the padding between the 2. By default the Compare button is set to show above the Add to Cart button.

Manually set Compare button position – To manually position the Compare button on your Single Product page you must first select this option then use this function.

<!--?php if(function_exists('wpec_add_compare_button')) echo wpec_add_compare_button(); ?-->

Styling the Compare Buttons

Because themes can have multiple styles for buttons it is impossible for the extension to know which style to use for the Compare Button on the Product Page and the Sidebar Widget. Instructions for changing default button style:

All objects in the plugin have a class so you can style for them. Using an ftp client open the style.css in your theme.

Look for the style of your themes buttons below is an example – it will look something like this

wrap input[type="submit"], #wrap input[type="button"] {

background: url('images/bg-button.png') no-repeat scroll right top transparent; border: 1px solid #153B94; border-radius: 5px 5px 5px 5px; box-shadow: 1px 1px 2px #333333; color: #FFFFFF; cursor: pointer; font-size: 12px; padding: 9px 27px 7px 10px; }

Once you have found that in themes style.css directory then add that style into your themes style.css under the class name

'bt_compare_this'

which is for the Compare button on the product pages and class name

'compare_button_go'

for the Compare button in the sidebar widget.

This is how it would look using the example above as the style for the button.

input.bt_compare_this { background: url('images/bg-button.png') no-repeat scroll right top transparent; border: 1px solid #153B94; border-radius: 5px 5px 5px 5px; box-shadow: 1px 1px 2px #333333; color: #FFFFFF; cursor: pointer; font-size: 12px; padding: 9px 27px 7px 10px; }

This will then mean that style will apply for all input tag in div that has the class compare_button_container to change the sidebar widget button you do the same but use the class

'compare_button_go'

Show Compare Featured fields

You can show a table listing all of the products features and values on your single product pages by inserting this function into your theme.

<!--?php if(function_exists('wpec_show_compare_fields')) echo wpec_show_compare_fields(); ?-->

The function 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.

Image Legend:

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.

Features tab

Manage all your Compare features on this tab.

Image Legend:

1. Features Tab

2. Add New – Click to create new Compare categories* and Compare Features and you are taken to another page, still under the features tab to do that.

3. Add Compare Product Categories – Give you new category a name and click create.

4. Add Compare Product Features.

5. The Add Compare Product Features and edit Compare Product Features are exactly the same layout except edit has pre populated fields.

6. Feature Name – The extension does not allow you to create duplicate Category or Feature names.

7. Unit of Measurement – This prefix auto shows after the feature name in brackets ex Feature name – Height, unit of measurement cm shows as feature Field Height (cm)

8. Feature Input Type drop down. This feature is a real time saver. It allows you to select 6 different options for adding the Feature data. If Check box (multi select), radio Buttons (select one), Drop down single select or drop down multi select are chosen the a drop down appears below to pre – populate with the data options.

9. Enter each option on a single line. Using this feature saves having to re enter data again and again – for example if the feature was Colour you would select Check Box (multi select) and add every possible colour that your entire range of products come in. Then when assigning the Field data to any product you just check the ones that apply to that product.

10. Assign this feature to 1 or many Compare Product Categories. This means a Compare feature like colour only has to be created once and can be assigned to any number of Compare categories.

11. Click the Save button to update the Compare Feature the page reloads and takes you back to the main Features admin page.

12. All newly created Features are auto added to the Compare categories they were assigned to.

13. Show / Hide feature on each Compare category floating place holder. Closed is the default setting. Click the arrow and the list of Compare features assigned to that category with appear. Click it again and they fold up into the Category floating placeholder.

14. Search Features – makes finding Product Features quick and easy.

15. Each Compare category Floating place holder displays the Compare category name.

16. Compare Features list within the Compare category. Drag and drop to change the order that the features appear in. This is the order that the Compare features show in the pop-up window for all products assigned to a category. The order is important to delivering user meaningful results in the compare window so we have made it very easy firstly see the order and secondly to move features with the category with this feature. Note: Lite version users only have one Category – the Master category in which all Feature fields are displayed.

17. Edit | Remove – Clicking the edit button on any feature opens the Feature edit page. Clicking Remove removes the Feature from this Compare category.

* Note: Create Custom Compare Categories is a Pro Version feature.

Products Tab

Now you have assigned your Compare Features to one or more Compare Categories all that is left to do is to activate Compare on the products and assign them to a Compare Category.

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 WP e-Commerce products database.

* Note: Compare Products Express Manager is a Pro Version feature. Lite version users can see the feature under the Products tab. The ability to Edit the Compare feature on each product is not activated. Lite version users can only edit the products compare features and compare product variations from each products edit page. Upgrade to the PRO version at anytime to activate this incredible time saving feature.

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.

Image Legend:

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.

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.

Compare Product Variations

The best place to manage the Compare feature for variations is from the Products tab – Compare Products Express Manager. Lite version users can activate and manage product variations from the products edit pages. The Compare edit feature for each product variation can be found on the products edit page. See graphic and notes below

Image Legend:

1. Variations meta section on any WPEC products edit page.

2. Product Variation name – If you want to be able to compare the parent products variations features (rather than the parent product) then you must configure Compare feature for the variation. You do that by clicking on the variation title to open the edit page.

3. When you click on the variation title in WPEC it opens the variations edit page.

4. Scroll down the variations edit page until you find the Compare Field Fields meta section. Click the Activate check box and use the drop down to select the Compare category to assign this variation to. Note: To be able to compare a products variations Compare features side-by-side in the pop-up window they must be assigned to the same Compare category.

5. Price Control – If you want to be able to Compare variations prices you must have a price set for the variation.  Remember that the Parent product always shows the lowest variation price as the ‘From Price’ on the product page.

6. Parent Product – If you activate the Compare features on variations but do not activate it on the parent product the Compare Variations will not show. Compare must be activated on the Parent and assigned to a Compare category. If activating Compare feature on variations you do not need to add Field data for the parent product because it is the variations to show in Compare not the parent. Just activate the Compare feature on the parent product and assign it to a Compare Category.

Troubleshooting

Compare Button is not showing.

On the Settings tab set the ‘Button Position relative to Add’ to ‘Below’ change the button position from where you have it set and Save. Then the button should show.

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 is blank – 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.

5,608 total views, 2 views today

Comments are closed.