Setting up Product Compare with WooCommerce
In the next WooCommerce WordPress plugin add-on guide, we will show you how to install and implement the Products Compare Tab add-on, which allows you compare the products on your ecommerce website and potentially improve your sales.
Step 1) On the Dashboard, head to ‘WooCommerce’ and click on ‘Add-ons’ from the dropdown.
Step 2) From the Add-ons section, click on ‘Free’ to bring up the list of free add-ons, and then click on ‘Product Compare’ from the list provided.
Step 3) This will direct you to the WordPress.org plugin page for ‘Product Compare’. Give the details a read-through before clicking ‘Download’, which will send a copy of the plugin to your Downloads folder in the form of a .zip file.
Step 4) Back on your website Dashboard, scroll down your sidebar and click ‘Plugins’, and then ‘Add New’. From the next page, hit ‘Upload’ and then ‘Choose File’, and find the .zip file for your new plugin and click on ‘Install Now’.
Step 5) Now that the plugin has installed, click on ‘Activate Plugin’ to complete the process.
Step 6) Once the plugin is activated, you can find ‘WC Compare’ on the left-hand sidebar on the Dashboard. There are three categories: Category & Feature, Product Manager and Settings & Style.
Step 7) On the ‘Category & Feature’ page, the first section is ‘Un-Assigned Features’. From here, you can edit features by inputting text to existing features, which in turn will be used to bring up comparative products on the main product pages of your website.
Step 8) You can manage and edit the order of your categories and features on the next section.
Step 9) The ‘Product Manager’ section cannot be used unless you sign up to the Pro Version of the plugin, which costs $79 for a single site license.
Step 10) The ‘Settings and Style’ section of the Plugin allows you to change the way the product compare features look on your site, including the product page, compare widget, product cards and the comparison page.
Step 11) You can change the positon of the product compare button, delete the history and decide whether or not to show the button using the options provided on the ‘Product Page Settings’ page.
Step 12) The Product Page Compare button can be altered in style – including colour, font, size and more – using the options provided. You can also upload your own compare success icon using the upload option provided.
Step 13) The View Compare section allows you to choose between a button and a hyperlink for comparison results, and you can alter the text for both using the options provided.
Step 14) The Product Page comparison tab can be switched on/off and the position of the tab can be changed using the options below. You can also change the Compare Tab Name should you wish to do so.
Step 15) The ‘Compare Widget’ and ‘Product Cards’ can only be changed using the Pro Version of the plugin, and some of the ‘Comparison Page’ settings also. However, the General Settings of the latter can be changed.
Step 16) The General Settings of the Comparison Page are adding a header image for the page, choosing between opening a table on the page for the comparison or opening the table in a new window (which is the more recommended option) and setting up Product Comparison page shortcode to add to any pages where a comparison hasn’t automatically appeared.
Step 17) The page style section of the Comparison page focusses on the background colours, borders, and text that appears when a comparison page comes up with zero results.