Th Product Compare Pro

Plugin Installation

Th Product Compare plugin helps you to create interactive product comparison tables and allow customers to compare their products.

  • Step 1: Go to your WordPress Dashboard and navigate to wp-admin > Plugins > Add Plugin. In the Right most side you’ll see the search box,  enter the keyword “Th Product Compare“. Plugin will appear.
Dashboard Add Compare
  • Then click on the ‘Install Now’ button.
  • Step 2: After the installation is completed, click on the ‘Activate’ button and “Th Product Compare” will be activated.
  • Step 3: After activating “Th Product Compare” in your dashboard, you can see the “Themehunk” tab in the dashboard Menu. Under it, you’ll find Th Product Compare tab, click on it. Now you can start customizing it.
Dashboard compare 1

How to Purchase & Install Pro Plugin

Th Product Compare Pro Plugin Allows customers to compare products. Using this WooCommerce plugin customers can compare their selected products and make a better decision before buying them.

th product compare 3 213
  • Step 2: Afterward, just simply hit the ‘Get Started’ button and it will directly take you to the ‘Pricing‘ section of Th Product Compare Pro Plugin.
Compare homepage


<

  • Step 3: Now choose your desired plan from here and hit the button Buy Now from the desired table.
  • Step 4: Purchase your plugin from here, and fill in all the required details. Log in to your member’s area. Your pro plugin has been added to your member’s area dashboard.
th product compare installation pro 3
  • Step 5: You’ll see a Th Product Compare Pro plugin zip file in your Member’s area. Download the zip file of the plugin.
  • Step 6: Now, Open your WP Dashboard > Plugins > Add New > Upload the Plugin Zip file and Activate it.
  • You can see the “Th Product Compare Pro” panel in your dashboard.

Appearance Setting of Compare Button ( Basic Setting )

  • For Button Appearance button settings, Go to your Dashboard > Th Product Compare Pro > Basic Settings.
Compare Basic
  • Compare Button Type and Text – This allows you to choose whether you want to choose an Icon or a Checkbox. You can write the text to be shown in the button.
  • Product Compare Button Redirection – This gives you 2 options: if you select Popup, the compare button will redirect to a pop-up where the comparison table will appear. If you select a page, the Compare button will redirect to a new page for comparison.
  • Comparison Limit – You can set the limit to which products can be compared.
  • Comparison Limit Tooltip – Change the text that appear when product limit is reached from here.
Compare Limit gif
  • Visibility – Mark the boxes if you want to show the compare button. If you don’t want to show the compare button on the listed page, leave the box unchecked.
  • Button Placements – You can select whether you want to show the compare button ‘Before cart’ or ‘After cart’ on the single product page.
appereance setting result

Compare button Advance Setting

For Compare button Advance Setting, Go to your Dashboard > Th Product Compare > Advanced.

  • Compare Same Category Product – If you enable this option, products’ category will be shown at the top of the table. You can click on the categories to show products of that category only.
  • Similarities & Differences – If you enable this button, you will see two buttons saying “Hide Similarities” and “Highlight Differences”. Users can enable these buttons to see the differences and hide similarities.
  • Field To Show in comparison table – You can display the following fields in your compare table – Image, Title, Price, Rating, Add To Cart, Description, SKU, Availability and Product attributes too.
  • Dynamic Attributes – Check this option to allow the custom fields to show in the table. You will need to create the attributes from the dashboard before this.
  • Repeat Fields – You can Repeat the “Price” field and Repeat the “Add to cart” field in your comparison table.
  • Product Image Size -Pro You can add the desired image size of your product and display it in your table.
Compare Advanced

How to Compare the same category product? PRO

  • To create a Category, Navigate to Dashboard > In the left side panel you’ll see Products > Categories.
  • Click on Category, Add a new Product category name and upload a thumbnail image here. Click on the “Add New Category” Button.
  • To edit a pre-existing category, select a category on the right side of the screen.
Product-categories-top-store
  • Go to your Dashboard > Th Product Compare > Advance Setting > Compare Same Category Product
  • Using this option you can enable or disable the Category Tab in the Comparison Table. The products added to the comparison table will be divided by category so that the comparison will be made only for products of the same category.
Compare Advanced 2

How to display Similarities & Differences? PRO

  • This option will be useful in highlighting the Similarities and differences between your products. You can easily compare similar products in a table that highlights differences or Similarities and focuses on product features.
Compare Advanced 3
  • Enable or disable Product Highlight Button- Using this option you can enable or disable Product Highlight Button. This will display the “Hide Similarities” & “Highlight Differences” Buttons in the Comparison Table.
compare similarities differences 1

How to order Product fields? PRO

  • You can easily drag & drop desired fields of your product. You can interchange place fields and show them in your comparison table.
  • You can display the following fields of your products – Image, Title, Price, Rating, Add To Cart, Description and SKU.
  • Along with these fields, you can also display Global attributes and Custom attributes.
  • Global Attributes – These attributes are created for all the products.
  • Custom attributes – You can display custom attributes (attributes created for individual products). To know how to create Attributes for your product. Go with this link.
  • Dynamic Attributes – Using this option you can enable or disable Product Dynamic Attributes in your comparison table.
ordering

Comparison Table Preview ​Styling PRO

To style your product comparison table, Go to your Dashboard > Th Product Compare > Style.

These styling settings are given to design your comparison table. The live preview of the Comparison Bar and Table is given on the right side of the page.

Compare Bar

  • {Selected} {Products} – This format is to set the text you can see in the bottom left of the Comparison Bar. You can change the text and alter the position.
  • Background – You can change the color of the background of the Comparison Bar.
  • Content Color – This is to set the color of the content and the delete icon on the left side of the Compare button.
  • Button Color – With this, you can change the color of the button text.
  • Button Background Color – This setting is used to change the color of the background of the button.
Compare Style

Popup Setting

  • Popup Heading Text – This box is used to change the text of the heading of the pop-up.
  • Popup Count Text – You can set the format and text for the text shown below Popup Heading Text.
  • Popup Animation – There are several animation options to set. The animation will take place when the user clicks onthe Compare button of the Compare Bar.
  • Global Colors – These color settings will help you set up the color of components of the pop-up. These components include header, table, add to cart, and close button.
Compare Style 2

Mobile Settings

This setting is especifically designed set up the mobile appearance of the comparison table. You can also see the live preview on right side.

Compare Mobile
  • Table Style in Mobile – Select whether you want to show Mobile Responsive or Desktop Style table.
  • Colors – Change the various component’s colors from here. You can edit the colors of button, rating, and background separately.
Compare mobile gif

How to Generate Shortcode PRO

Go to your Dashboard > Th Product Compare > Shortcode Generator.

Compare Shortcode
  • Choose Products – Using this option, you can create a shortcode with the desired products. When You can use this shortcode anywhere in the pages & posts. Search for your products in the search box, and it will automatically create a shortcode for your product. Copy that shortcode and place it on your page or post.
  • Display via Shortcode – Add a compare anywhere on the page using shortcode. You will need to enter the product ID in the shortcode. When the user clicks on the Compare button, the compare bar will appear on the page with the same product whose id you entered in the shortcode.
Display via Shortcode gif
  • Display Compare Product List via Shortcode – Put several Product Ids in the shortcode, and they will appear in the comparison table on the desired page you paste the shortcode on.
Product List via Shortcode gif

How to display the Comparison table on Product single page PRO

Go to your Dashboard > Th Product Compare > Single Page Settings.

Compare Single Page
  • Automated Comparison Table – This option will add a Comparison Table to the single pages of All Products.
Single page compare table
  • Product Compare By – This option will be useful to display comparisons using Category, Tag, or Related products in your Single Product Page. For example, if Category is selected, then products of the same category will appear in the Comparison Table.
  • Number Of  Products – From this option, you can add the Number of products limit to show on a single product comparison page. For example, if 2 is set in the box, then 3 products will be shown in the table, including the product itself.
  • Exclude Product – You can exclude products from a single product comparison page. If you exclude any product, then on the excluded product, the comparison table will not appear.
  • Manual Method – Manual option available to display the table only on the desired product page with selected products.
  • To get this option, just go to your products > When you scroll down the product page editor, you’ll see Product Data panel > Compare option > Show Compare Product > Select manual. It will open options for you. Now you can include the Compare Product that you want to show on that particular single product page.
manual setup single page th compare product 2

Custom Fields & Hooks

Add your own custom product fields to Product Compare Pro. The plugin reads native WooCommerce post meta, Advanced Custom Fields (ACF), and Secure Custom Fields (SCF). Developers can also register fields programmatically with the th-product-compare-field filter so any desired custom field appears in the compare table.

At a glance

  • Supported sources: WooCommerce post meta, ACF, SCF
  • Programmatic hook: th-product-compare-field

Quick user steps

  • Create the custom field in ACF, SCF, or the native custom fields box and assign it to the Product post type. Note the field name (meta key).
  • Add the field to Product Compare. You can either add it via the plugin Field Map UI or register it programmatically with the filter shown below.
  • Clear any caches and open the compare popup or table. The new field will appear in the field list and can be reordered like other fields.

Programmatic registration

Use the th-product-compare-field filter to add custom fields. Product Compare will merge your fields with the default set, so your callback should accept the existing fields array and return the merged result.

Filter details

  • Filter name: th-product-compare-field
  • Purpose: Register or extend compare fields programmatically
  • Expected return shape: associative array where keys are internal field keys, and values are arrays with at least title and field_key values

Example

Note: Add this code to functions.php or Code Snippets

add_filter( 'th-product-compare-field', 'theme_name_callback' );

function my_callback(){
return array('key1'=>['title'=>'Memory','field_key'=>'key1'],
'key2'=>['title'=>'Memory','field_key'=>'key2'],
);
}
add_filter( 'th-product-compare-field', 'my_callback' );


[
'key1' => [ // ← U WordPress post meta key (custom field key)
'title' => 'Label', // ← Shown in the compare table header/UI
'key1' => 'meta_key', // ← WordPress post meta key (custom field key) to fetch from the product
],
...
]

After adding the code to your functions.php file, you will now see the extra fields added to your Product Compare Table, as shown in the screenshot below.

compare fields 313

As you can see in the above image, we have added the custom fields.

Custom Attributes

Follow these steps to create attributes

Step 1: Go to the WordPress dashboard and navigate to Products > Attributes.

Attribute dashboard

Step 2: Create a Size attribute and click the Add Attribute button.

Add Attribute

Step 3: After creating the attribute, you will see an option called Configure terms for the attribute you created.

Attribute configure terms

Step 4: Click Configure terms and add the Size values one by one.

Attribute Values

Step 5: After creating the attribute, go to Products > All Products and edit the product where you want to add the Size. Scroll down to the Product data section and click on Attributes.

Product dash Attributes

Step 6: Click Add existing, select the Weight attribute, and choose the appropriate weight for the product.

Product Attributes

Step 7: To display this custom attribute in the comparison table, go to Product Compare Pro > Advanced > Fields to Show in Comparison Table, check the Size option, and click Save changes.

Compare Fields Attribute

Get Help

  • If you encounter any difficulties, please don’t hesitate to contact our support team through the support forum.
  • You can also contact us by filling out the form or by pinging us at our Live chat for pre-sales queries.