QODE Compare for WooCommerce


1. Getting Started

Hi, and welcome to the QODE Compare for WooCommerce User Guide. The User Guide covers all the information needed to use the QODE Compare for WooCommerce plugin with your theme to build an amazing eCommerce website.

If you need any additional assistance while using our plugin, you can always submit a topic to the support forum at wordpress.org/support/plugin/qode-compare-for-woocommerce and our support team will be glad to help you out. You can also send us an email at [email protected]

You can navigate through different sections of the User Guide by clicking on the links in the menu to the left of your screen. You will also notice that we have highlighted certain parts of the text throughout the User Guide, such as important pieces of information and useful tips.

This user guide covers the full set of options that the plugin provides, including both its Free and Premium versions. 

The QODE Compare for WooCommerce plugin is designed to let you streamline the user experience for your shoppers by providing them with the practical comparison functionality, allowing for easily accessible side-by-side product overviews with item features & highlighted differences. 

The plugin is designed to work in tandem with the free WooCommerce plugin, so in order to ensure proper plugin functioning, please make sure you have installed and activated your copy of the WooCommerce plugin. 

Installing the QODE Compare for WooCommerce plugin

First off, here's a list of minimum requirements as well as recommended hosting parameters for running QODE Compare for WooCommerce plugin: 

Minimum Requirements

Recommended Hosting Parameters

There are two ways you can go about installing the QODE Compare for WooCommerce plugin: 

Installing From Your WordPress Dashboard

  1. Navigate to your WordPress Dashboard -> Plugins -> Add New
  2. Search for QODE Compare for WooCommerce
  3. Install and Activate Qode Essential Addons from your Plugins page.

Installing Directly From wordpress.org

  1. Locate and download QODE Compare for WooCommerce on wordpress.org
  2. Upload the qode-compare-for-woocommerce directory to your ‘/wp-content/plugins/’ directory, using your preferred method (ftp, sftp, scp, etc…)
  3. Install and Activate QODE Compare for WooCommerce from your Plugins page.

In the following sections of the User Guide you'll find a comprehensive overview of all the settings available in the plugin's QODE Plugins for WooCommerce > Compare section of your WordPress admin panel once you have installed and activated the QODE Compare for WooCommerces plugin.

The settings found here are applied globally and will affect the entirety of your website.

You can look up any of the available global options by typing in the keyword or a part of the option name in the search field located at the top of the screen in the Compare options section. 

2. Global

In the Global section of the plugin options you are presented with options for making general adjustments to the plugin funcionalities. 

This is where you can select a page you wish to use the main Compare page on your website. After selecting the desired page, please make sure to add the [qode_compare_for_woocommerce_table] shortcode to that page's content. 

After this, you have the option to select whether you wish to show the Compare page link at the end of the navigation items on My Account pages or not. 

After you've done so, you can input the product categories you'd like to exclude from comparison. The option that follows lets you reverse this decision, enabling comparison for the excluded categories exclusively. 

The remaining options let you apply a predetermined, plugin-defined stylization to the comparison feature, and finally, you can and enable custom SVG uploads (please make sure you are familiar with security risks involved before doing so). 

3. Comparison Table

This section provides you with a selection of options related to the Comparison Table and its appearance, and it is divided into two sub-tabs, General and Styles. 

 

General

First up, you can choose whether you wish to display Comparison Table titles or not. After this you can set an image you'd like to display at the top of the table and choose where you wish to display it; it can be shown on either popup tables, standard page tables, or both. 

Next up, you can choose whether you wish to enable a product category filter for your tables. In the event that you enable this option, you can also input a title for the filter, and choose whether the filter stays turned on for mobile devices as well. 

Following this, you can choose which previously created product attributes you'd like to display in the table. You also have the option to rearrange the order of these attributes here by using drag & drop. 

The option that follows lets you select the info you'd like to display in the info fields of you tables. 

The set of options that follows lets you further define the appearance and content of your tables.

 

You can hide empty attribute fields from the table, choose whether you wish to display custom product attributes, full product descriptions, and repeat the price and add to cart table fields. 

 

After this, you can enable a confirmation dialog prompt before an item is removed from the table, you can enable highlighting table rows with different values, and choose whether you wish to hide table rows with identical values. 

Finally, you can set a number of fixed table columns, adjust the maximum number of products per comparison table, and choose where in the table will the newly added products appear. 

 

Comparison Table Features

After this, you can choose whether you wish to display the 'Clear All' buttons in your Comparison Tables.

In the event that you choose to display them, you can also input a custom label for these buttons and select whether you wish to hide them on mobile devices or not. 

 

Following these, you are presented with an option for providing your visitors with table settings.

You can enable the table settings section in your tables, and choose whether they will appear on mobile devices as well. The same applies to the Print table button. 

Finally, you can choose whether you wish to enable the social share feature for the table or not.

In the event that you enable social sharing, you can choose where this feature appears (popup tables, standard table pages or both), and select which networks you wish to enable the sharing for. This feature can also be optionally disabled for mobile users. 

 

Related Products

This is where you can enable displaying the Related Products slider sections after your comparison tables. 

If this option is enabled, you can input a custom title for this section, and choose where you wish to display the related product sliders (popup tables, standard table pages or both). 

The final options in this section let you adjust the number of columns for the Related Product slider, as well as enable the slider autoplay and navigation. 

 

Styles

 

Category Filter Style
The first subset of options found in this sub-tab relates to the category filter appearance.

You can set a color for the category filter title text, and adjust link default and hover colors. 

 

Table Style

The following set of options in this section allows you to configure the general appearance of your tables. 

Here you are presented with options for adjusting the remove icon color, remove icon hover color, the add to cart button text color & hover color, the add to cart button background color, background hover color, rating color, and finally the color for the highlighted rows (in the event that you enabled highlighing rows with different values from the Global plugin options). 

 

Social Share Style

In the event that you enable the sharing feature, you can set an opener color, opener hover color, social icon color, social icon hover color, and social icon size here. 

The following options in the Comparison Table Styles sub-tab lets you configure social share stylization. 

You can choose between predetermined, plugin-defined styles for each of the social network icons you decided to feature, or you can upload custom icons of your own. Finally, here you can set a fill color, stroke color, fill hover color, and stroke hover color for each of the networks separately. 

 

Related Products Style

If you enabled displaying Related Products sliders after your tables in Global plugin options, you can make stylistic adjustments to the related products section appearance here. 

You can adjust the title text color, button text color, button text hover color, button background color, and button background hover color for the related products section. 

4. Compare Button

Here you are presented with a selection of options related to the 'Compare' button and its appearance, and it is divided into two sub-tabs, General and Styles. 

General

 

First off, you get to choose what happens when the Compare button is clicked. 

 

There are 7 behavior types you can choose from: open comparison page, open comparison popup, open comparison bar, open comparison sidebar, open side popup, show message, and only add to comparison. 

Depending on the behavior type you select here, you'll be able to further adjust certain aspects relating to these button behaviors. 

If you selected the open comparison table popup behavior, you'll also be able to choose whether you wish to open the lightbox containing the table automatically upon adding a product to comparison or not.

 

You can also set the lightbox to be automatically opened once the 2nd product is added to comparison. 

 

The same applies to the open comparison bar behavior type. 

In the event that you selected the open comparison sidebar behavior, you can choose where you wish to position the sidebar with compared products, and the same applies to the show message behavior type. 

 

Product Loop Options

After this, you can choose whether you wish to display the 'Compare' buttons in your WooCommerce loops (shop pages, archives, and everywhere else where WooCommerce lists are displayed). 

 

Next up, you can choose a type of the 'Compare' button you wish to display in loops (Textual or Solid), and you can choose where you wish to position the icon inside buttons relative to button text.

 

You can also choose between plugin-styled, predefined button icons, or upload custom icons of your own, and you can configure the icon size.

 

This applies to both default 'Compare' button and the button found next to products which were already added to comparison.

 

The last settings found in this subset of options let you input custom labels for 'Compare' button (both default and for already added products), and you can choose the position for the button in WooCommerce loops. 

 

Product Page Options

Here you can enable displaying the 'Compare' buttons on your product pages. 

Much like in the case of Product Loop Options, you can choose a type of the 'Compare' button you wish to display on product pages, and you can select where you wish to position the icon inside buttons. 

Once more you get to choose between plugin-styled, predefined button icons or upload custom icons of your own, and you can configure the icon size.

This applies to both default 'Compare' button and the button found next to products which were already added to comparison.

 

The final set of options found here let you input custom labels for 'Compare' button (both default and for already added products), and you can choose the position for the button on single product pages. 

 

Styles

 

Product Loop Style Options

The first set of options found in this sub-tab relates to the 'Compare' button typography and appearance in WooCommerce loops.

Here you can choose a font family for the compare button text, as well as configure the font size, line height, letter spacing, font weight, pick a text transform style, font style, text decoration style, as well as pick colors for text in its idle and hover states. 

Product Page Style Options

The following set of options in this section allows you to configure the 'Compare' button appearance on single product pages. 

Much like in the case of Product Loop Style Options, here you can select a font family for the compare button text, as well as configure the font size, line height, letter spacing, font weight, pick a text transform style, font style, text decoration style, as well as pick colors for text in its idle and hover states.