View Product Page

Comparison table settings

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 which shows only if the comparison table is set as a modal window;
  • Table image: the image shown in 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.
    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.
  • Add products custom attributes: the attributes created within a single product;

Comparison table settings

  • Fields to show: product fields to add to the table. Every time 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 the Add to quote button in the product info section;
  • Use full description: the full description of the product will show in the table instead of the “Short Description”;
  • Repeat “Price” field: by enabling this 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: by enabling this option, the add to cart button will be replicated in the related column in the lowest part of the table;

Comparison table settings

  • 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 values 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;
  • Show ‘Clear All’ button: enable this option to allow resetting the comparison table to remove all the products added;
    • “Clear all” button label: enter the text to show for the Clear all button.

Show "Clear all" button

Social network sharing

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

Social network sharing
  • Enable Sharing: enable/disable social network site 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, 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;
  • Facebook App ID: to allow sharing through Facebook, you need to register and configure an App ID by following the official documentation
  • Facebook image: here, you can upload an image for Facebook sharing.

 

Related Products

Related products

  • Related Products: by enabling this 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;
  • Show related products in: choose whether to add the slider to the modal window in which the comparison table will be displayed and/or in the dedicated “Compare” page”;
  • Visible Number: set how many products to show in the slider;
  • Autoplay: enable to activate the autoplay of the slider;
  • Slider Navigation: show/hide the navigation arrows of the slider.

Related products in the comparison table

Style

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

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.

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.

Counter shortcode

Widget

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

Shortcode example

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.

Comparison widget

2. Product Counter

The second one is 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