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.
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.
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.
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.
<
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
How to Generate Shortcode PRO
Go to your Dashboard > Th Product Compare > Shortcode Generator.
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 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.
How to display the Comparison table on Product single page PRO
Go to your Dashboard > Th Product Compare > Single Page Settings.
Automated Comparison Table – This option will add a Comparison Table to the single pages of All Products.
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.
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-fieldfilter 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.
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.
Step 2: Create a Size attribute and click the Add Attribute button.
Step 3: After creating the attribute, you will see an option called Configure terms for the attribute you created.
Step 4: Click Configure terms and add the Size values one by one.
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.
Step 6: Click Add existing, select the Weight attribute, and choose the appropriate weight for the product.
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.
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.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.