View Product Page

Premium version settings

Compare options

Home > Premium version settings

The General settings section is where you can find all the compare-related and button-related options that will be globally applied.

Here, you will find the Compare and “Compare” button options.

Let’s start with the general compare options:

Compare options
  • Show compare on: through this option, you can choose whether to show the compare button on all your products or only on products of specific categories. By selecting the latter, you can add the categories to the field Categories to include;
Hidden button
  • Hide button in specific products: this is the option you can enable if you need one or more products to be excluded from the comparison features. By enabling it, you can add the products to the field Products to exclude so that the compare button will not show;
  • Allow comparison between: this option allows you to choose which products can be compared with each other from All products or Products in the same category. In the latter case, users can add any product to the comparison table, but, when they open it, it will only show products of the same category as the last product added. Additionally, a category filter is optionally displayed on top of the table to show products of other categories.
Compare by category
  • Limit product comparison: by enabling this option, you can define the maximum number of products to be added to the table for comparison. Enter the number of products in the field Max number of products in comparison.

Now, go to this page to learn about the Compare button options.

Compare button

Home > Premium version settings

Through the Compare button options available in the General settings, you can define the button and comparison table style and actions.

Compare button options
  • Compare style: use this option to choose whether to use a button, a link or a checkbox to let users add a product to the comparison table;
Compare button
Button
Compare link
Link
Compare checkbox
Checkbox
  • Link/Button label: enter the text to show for the link or button;
  • Link/Button label for products in comparison: enter the text to let users know the product has already been added to the comparison table;
Label for products already added to comparison table
  • Show compare in: select the pages where the compare button will show by choosing from Shop page, Product pages or Both;
  • Open comparison table: you can show the comparison table in overlay or in a page.

Comparison table in overlay

Comparison table in overlay

By choosing to open the comparison table in overlay, you can also decide when to show it based on one of the following user’s actions:

  • The user manually clicks on view anchor: the comparison table will open when users click on the anchor to view the products added to the list;
  • The user selects the first product: the comparison table will automatically open when users add a product for the comparison by clicking on the related button, link, or checkbox;
  • The user selects a second item: the comparison table will automatically open when users add a product to the list when it already includes more than one product.
Comparison table in overlay

Comparison table in a page

Comparison table in a page

By choosing to open the comparison table in a page, you can select the Compare page automatically created by the plugin or use a different page by making sure to include the [yith_woocompare_table] shortcode in the page selected from the dropdown.

Compare page

Table options

Home > Premium version settings
Comparison table options

The Comparison tables section includes the settings related to the tables shown to users to compare your products.

The available options are:

  • Show table image: enable this option to show an image/logo on the top of comparison tables. You can upload the image through the dedicated loader;
  • Show table image in: you can choose to show the tables image only on the Compare page, only in the Compare overlay, or Both;
Table image
  • Table title: enter the title to show for the tables;
  • Table description: set an optional text as the description of the tables;
  • Fix columns in the table: enable this option to set 1 or more fixed columns on tables when horizontally scrollable. Enter the number of fixed columns in the field Number of fixed columns;
  • Highlight differences: enable this option if you want the rows of the table with different values to be highlighted in a different color.
Highlight differences

You can set the color of the highlighted rows in the Style section.

Table content

Home > Premium version settings

To manage the content to show in the tables, go to Comparison tables > Comparison tables > Table content.

Now, enable all the fields you want to show as rows in the comparison and choose their order by a drag-and-drop action.

Table fields

Other options are:

Table content
  • Dynamic list of attributes: this option lets you show only the product attributes, among those previously selected as fields to show, that have information about at least one of the compared products;

Please, note: this option applies only to product attributes and not to the default WooCommerce fields (that is product info, price, rating, description, SKU, availability, and weight) that will be displayed anyway even if empty, but with a dash.

  • Show custom attributes: by enabling this option, the custom attributes set for the products will show in the comparison table;
Product custom attributes
Custom attributes set in the product
Custom attributes
Custom attributes shown in the table
  • Description to show: choose whether to show the full or short description of the products in the table;
  • Image format: select the format to use for the images. You can use the original format or the thumbnail of which you can set the size through the option Image size;
Image format
  • Show “Clear all” button: enable this option to allow resetting the comparison table to remove all the products added. You can set the text to use for the Clear all button by entering it in the option “Clear all” button label;
Clear all button
  • Replace In Stock/Out of Stock with check and cross icons: through this option, you can show check and cross icons that will replace the texts “In stock” and “Out of stock”.
Stock icons

Social media sharing

Home > Premium version settings

In Comparison tables > Social media, you find the settings to let your users share their comparison table on the supported social network (Facebook, X, Pinterest) or via email.

Social media sharing
  • Allow social media sharing: enable to show the social media icons in table;
  • Show sharing options in: choose whether to add the sharing icons in Compare page, Compare overlay, or Both;
  • Select social media platforms: add the social media platforms that enable the sharing option. Choose from Facebook, X, Pinterest, or email (in this case, the click of the users will open the email client installed on their PC);
  • Title for social media sharing: enter the title for the sharing message shown in the comparison table;
  • Text for social media sharing: enter the text for the sharing message of the comparison table;
  • Facebook App ID: to allow sharing through Facebook, you need to register and configure an App ID by following the official documentation. 
  • Facebook image: upload an image for Facebook sharing.
Social media sharing

 

Related Products

Home > Premium version settings

From the section Comparison tables > Related products, you can configure the options to show the related products in a slider under the table.

Related products
  • Show related products: by enabling this option, you can add a slider 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;
  • Show them on: choose whether to add the slider to the Compare page, Compare overlay or Both;
  • Title: enter the title for the related products section;
  • Max. number of products to display: set how many products to show in the slider;
  • Slider options: select whether to show the navigation arrows (prev and next) and activate the autoplay of the slider.
Related products in the comparison table

Preview

Home > Premium version settings

The plugin automatically provides a preview of the products added to the comparison list so that users don’t need to open the table if, for example, they need to remove one or more products.

Comparison table preview

Table shortcodes

Home > Premium version settings

From the Table shortcodes section, you can create comparison tables for specific products of the shop.

Click on the Create shortcode button

Create shortcode button

and set the options available in the modal.

Shortcode modal
  • Shortcode name: enter the name to identify the table shortcode;
  • Select products: search the products for which the table will apply;
  • Layout: select the comparison table style choosing from Wide or Compact.

All the created shortcodes will be added to the table from which you can copy the shortcodes to insert into your pages. Each shortcode can be edited, duplicated, or removed through the actions shown on mouse hover.

Shortcodes list

Style

Home > Premium version settings

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

Style options

Shortcodes & widgets

Home > Premium version settings

Shortcodes

The plugin includes three shortcodes.

1. Custom comparison table

This shortcode lets you create comparison tables for specific products of the shop. To do it, go to the Table shortcodes section and select the products to show in the customized table.

Shortcode modal

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

Compare page

2. Product Counter

This shortcode 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 to any page or even in a widget.

Counter shortcode
Widget

This is what it might look like on the Shop page before the products.

Counter

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 the following shortcode:

[yith_compare_button]

Compare button shortcode

Widgets

The plugin provides you with two different widgets.

1. Products in the list

This widget shows the list of the products users have added to the comparison table.

Comparison widget

2. Product Counter

This widget shows a counter of all products added to the comparison list so far.
You can enter a title and 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.

Counter widget