General settings

The plugin allows comparing two or more products of the shop.
The users can add the product to the comparison table through a specific button available on the shop page and/or on the product detail page.

Compare on frontend

Compare on product page

The products will be shown to the user in a comparison table displayed as a page or as a popup.

Comparison table

Following you find general settings of the plugin

Compare general settings

Compare general settings 2

  • “Link or Button”: choose here if you want to use a link or a button to allow your users to add a product to the comparison table.
  • “Link/Button text”: the text of the link and/or the button used to add the products to the comparison table
  • “Page or Popup”: the comparison table can be shown as a popup or within a page.
    Select ‘popup’ if you don’t want your users to leave the page where they are, select ‘Page’ if you prefer showing the comparison table on a dedicated page.
  • “Choose Compare Page”: the Compare page is automatically created. Yet, if you want to use another specific one, please, make sure you include the [yith_woocompare_table] shortcode on that page and select the new page from this dropdown.
  • “Show button in single product page”: show/hide the button on the product detail page.
  • “Show button in products list”: show/hide the button on the Shop page.
  • “Open automatically lightbox”: if this option is activated, the modal window of the comparison table will open automatically when users will add a product for the comparison clicking n the related button.
  • “Open lightbox when adding the second item”: the modal window will be automatically open when users add a second item to the comparison table This behavior can be useful to avoid showing a comparison table with just one element.
  • “Compare by category”: activating this option, all the products added to the comparison table will be divided by category so that the comparison will be done only for products of the same category.

Category filter

With the “Exclude category” option, you can set the categories of the products you don’t want to allow the comparison for.
On the contrary, if you want that only these products can be compared, you just need to activate the “Reverse exclusion list” option.

 

Table settings

In order to edit the settings related to the comparison table go to YITH > Compare -> Comparison table.

Comparison table settings

 

  • Table title: the title of the table, it appears only if the comparison table is showed in a modal window.
  • Table image: the image to add ahead of the table.
  • Show table image in: choose whether to show the table in the “Compare” page and/or in a modal window.
  • Dynamic Attribute fields: this option lets you show only the product attributes, among those chosen in the “Fields to show” option, that have information about at least one of the compared products.
  • Add products custom attributes: the attributes created within a single product
  • Fields to show: product fields to add to the table. Each time that you create a new attribute on WooCommerce, it will be available in this line.
    The field arrangement can be modified with a drag and drop action of the available entries.
  • Product Info Fields: product information to add to the table (name, image, add to cart button). The order of these fields cannot be modified as you can do for those in the “Fields to show” section.
  • Show “Request a Quote” button in product info: show button to add to quote in product info section.
  • Use full description: the full description of the product will be displayed in the table instead of the “Short Description”
  • Repeat “Price” field: activating the option, the price of each product will be replicated in the related column in the lowest part of the table.
  • Repeat “Add to cart” field: activating the option, the add to cart button will be replicated in the related column in the lowest part of the table.
  • Image size: the size of the product images in the comparison table.
    If you encounter difficulties with the correct displaying of the images, we suggest you regenerate the product images.
  • Highlight different values: the rows of the table with different value will be highlighted in grey (default color)
  • Number of fixed columns: select the number of fixed columns to show in the comparison table.
  • Limit compared products: enter a maximum number of products that can be added to the comparison list. Leave 0 for unlimited items.

If you want to allow resetting the comparison table to remove all the products added, you can show a “Clear all” button by checking the option “Show ‘Clear All’ button”. 

Comparison table settings 2

Shortcodes & widgets

Shortcodes

The plugin includes three shortcodes.

1. Custom comparison table

The first one lets you create comparing tables for specific products of the shop. In order to do it, go to the “Build Shortcode” section of the settings panel of the plugin, and select the products you want to display in the customized table.

Compare shortcode

 

Copy and paste the generated shortcode on the page where you want to show it.

Compare shortcode on page

 

2. Product Counter

The second one lets you show a counter of the products added to the comparison list so far. The shortcode is:

[yith_woocompare_counter]

It can be added on any page or even in a widget.

This is how it might look like on the Shop page before the products. Product counter - Shortcode

3. Compare button

If you’re building your shop page and/or product pages using a page builder, you may need to show the “Compare” button using a shortcode. You can use this one:

[yith_compare_button]

Compare button shortcode

Widgets

The plugin provides you with two different widgets.

1. Products in the list

The first one shows the list of the products that users have added to the comparison table.

comparewidget

 

2. Product Counter

The second one is a counter of all products added to the comparison list so far.
You can enter a title, choose to show only numbers or both numbers and text.
If you want to, you can pick an icon from your Media gallery and customize the text to make it clear to your customers what the counter is for.

Widget settings

Counter on Frontend

Style

All the comparison table colors can be customized in “YITH Compare -> Style” in Category Filter Options, Table Options, Share Options, and Related Options.

Compare - style

Related Products

 

Compare related products

Activating the Related Products option you can add a slider right after the table with all the products of the shop that have tags/categories in common with at least one of the products in the comparison table.
The slider can be added in the modal window in which the comparison table will be displayed and/or in the dedicated “Compare” page”.
Moreover, with the plugin options you can:

  • set how many products to show in the slider;
  • enable the autoplay of the slider;
  • show/hide the navigation arrows of the slider.

 

Related products in the comparison table

Social network sharing

You can activate the sharing of the comparison table on one of the offered social network sites or via email.
In order to configure the sharing options go to “YITH > Compare -> Social Network Sites Sharing”.

Social network sites sharing

 

  • Enable Sharing: activate/deactivate social network sites sharing.
  • Show sharing in: choose whether to add the sharing buttons in the modal window and/or in the “Compare” page.
  • Select Social Network Sites: the sites to enable the sharing. Choose from Facebook, Twitter, Google+, Pinterest or email (in this case, the click of the users will open the email service installed on their PC).
  • Title for Social Network Sharing: title for the sharing message of the comparison table.
  • Text for Social Network Sharing: text for the sharing message of the comparison table.

In order to allow the sharing through Facebook, you need to register and configure an App. Follow the official documentation

YITH Request a Quote

YITH WooCommerce Request a Quote allows enabling an easy-to-use system to manage quotes and price estimates. Your users can add one or more product to the quote list and send a request. The admin can, then, make a custom price and send the quote (email and PDF document as well): if the users accept the quote, they will be directly taken to the checkout and to purchase the selected products at the agreed price.

The integration with YITH Compare allows you to show the “Add to Quote” button also on the products displayed on the Compare list, so, requesting a quote will be as easy as pie.

To enable this integration, just make sure you have installed and activated the premium version of both plugins.

Then go to the YITH > Compare > Comparison table and flag the option called Show “Request a Quote” button in product info.

Compare and Quote

This is how it will look on the comparison table:

Quote button in compare list

For further details about the YITH Request a Quote configuration, please, refer to the official documentation.

YITH WooCommerce Quick View

YITH WooCommerce Quick View will allow your customers to get a quick view of the product in which they are interested. The product details will be shown in a popup, so they don’t need to leave the page they are currently visiting.

You will only have to activate both plugins in order to make them work together. The combined use of these two plugins will insert the “Compare” button in the quick view popup of the product. This will give your customers the possibility to add a product to the compare list without abandoning the current product popup.

YITH Compare button in quick view popup

For more information about how to set up the YITH WooCommerce Compare plugin, check out the full documentation here.

YITH Color and Label Variations

YITH WooCommerce Color and Label Variations allows you to create custom attributes for the variations of products available in your shop. From version 1.9.0 on it is also possible to show the single variations in archive pages.

Compare integration

Combining the two plugins will make it possible to also compare these single variations in archive pages, like in the example above, where we compared two of the same hoodies but in different colors.

In order to make them work together, you will only have to activate both plugins and set them up as you wish. For more information on how to set up the YITH Color and Label Variations plugin, check the documentation here.