Setting Up WooCommerce Product Compare 

Enabling Product Comparison on Your Store 

Configuring General Settings 

Go to WooCommerce > Settings > Products Compare > General tab.

Here, you’ll find these general settings to configure:

General: 

Enable: Use this checkbox to activate/deactivate the plugin

Select User Roles: Choose which user roles have access to the product comparison functionality. The following user roles are available for selection:

  • Administrator
  • Editor
  • Author
  • Contributor
  • Subscriber
  • Customer
  • Shop manager
  • Wholesale
  • B2B
  • Retailer
  • Guest

Note: Leave this field empty to apply the product comparison feature to all user roles.

Fast Compare: Mark this checkbox to allow users to open the product comparison table via AJAX

Clear Compare List: Display a button on the popup to remove all products from the compare list

Button Button Shop: Select the button’s position on the shop page. Option include: 

  • Before All
  • After Image
  • After Title
  • After Price 
  • After add to cart button
  • Disable 

Button Position on Product Page:

Compare Page: Choose where the product comparison button will appear on individual product pages

  • Before All
  • After Image
  • After Title
  • After Price 
  • After add to cart button
  • Disable 

Compare Page: Use the [wpc_compare_products] shortcode on your selected page to create a dedicated product comparison page

Clear Compare Page: Enable this option to provide a button for customers to clear the entire product comparison table on the compare page

Select Product Categories: Specify which product categories are eligible for comparison. You can leave this field empty to apply the product comparison feature to products in all categories

User Attributes: Select the attributes that will be included in the product comparison

Popup Button on Compare Page: Enable this to display button to appear popup on the compare page

Click “Save Changes” to apply the new settings. 

Customizing Compare Button Appearance 

You can easily customize the appearance of the compare buttons and tables while using the WooCommerce Product Compare Plugin. 

To do so, simply go to WooCommerce > Settings > Style tab. 

Widgets Compare Button:

Border Width: Specify the width of the border for the compare button in the widgets

Border Radius: Define the border radius to control the button’s rounded corners

Size: Adjust the size of the button

Border Color: Choose the color of the button’s border

Font Color: Set the font color of the button

Background: Customize the background color of the button

Toolbar Compare Button:

Border Width: Set the border width for the compare button in the toolbar

Border Radius: Configure the border radius to control the button’s rounded corners

Size: Adjust the size of the button

Border Color: Choose the color of the button’s border

Font Color: Set the font color of the button

Background: Customize the background color of the button

Toolbar Open Button: 

Border Width: Specify the width of the border for the open button in the toolbar

Border Radius: Define the border radius to control the button’s rounded corners

Font Size: Adjust the font size of the open button

Width: Set the width of the open button

Height: Adjust the height of the open button

Button Position: Define the position of the open button

Border Color: Choose the color of the open button’s border

Font Color: Set the font color of the open button

Background: Customize the background color of the open button

Popup Table:

Border: Set the border properties for the table in the popup

Image Width: Define the width of images in the table

Font Color: Set the font color for the table

Table Body Color: Customize the color of the table body

Background Color: Set the background color of the table

Padding Outside Top: Adjust the padding outside the table on the top

Padding Outside Bottom: Set the padding outside the table on the bottom

Padding Outside Left: Configure the padding outside the table on the left

Padding Outside Right: Define the padding outside the table on the right

Compare Page Table:

Border: Set the border properties for the table on the compare page

Image Width: Define the width of images in the table

Font Color: Set the font color for the table

Background Color: Customize the background color of the table

Padding Outside Top: Adjust the padding outside the table on the top

Padding Outside Bottom: Set the padding outside the table on the bottom

Padding Outside Left: Configure the padding outside the table on the left

Padding Outside Right: Define the padding outside the table on the right

Cross button on popup:

Icon Size: Specify the size of the icon on the cross button

Icon Color: Set the color of the icon

Icon Color on Mouse Over: Define the color of the icon when hovered

Background Color: Customize the background color of the button

Button Width: Set the width of the button

Button Height: Adjust the height of the button

Padding Left: Configure the padding on the left side of the button

Padding Right: Define the padding on the right side of the button

Padding Top: Adjust the padding on the top of the button

Padding Bottom: Set the padding on the bottom of the button

Popup Clear List Button:

Font Size Normal: Set the font size for the clear list button when not hovered

Font Size On Mouse Over: Adjust the font size for the clear list button on mouseover

Padding Top: Configure the padding on the top of the button

Padding Bottom: Define the padding on the bottom of the button

Font Color Normal: Set the font color for the clear list button when not hovered

Font Color On Mouse Over: Define the font color for the clear list button on mouseover

Background Color Normal: Customize the background color for the clear list button

Background Color On Mouse Over: Set the background color for the clear list button on mouseover

‎   

Compare Page Clear List Button:

Font Size Normal: Set the font size for the clear list button on the compare page when not hovered

Font Size On Mouse Over: Adjust the font size for the clear list button on mouseover

Padding Top: Configure the padding on the top of the button

Padding Bottom: Define the padding on the bottom of the button

Font Color Normal: Set the font color for the clear list button on the compare page when not hovered

Font Color On Mouse Over: Define the font color for the clear list button on mouseover

Background Color Normal: Customize the background color for the clear list button

Background Color On Mouse Over: Set the background color for the clear list button on mouseover

“Add to compare” button:

Font Size Normal: Set the font size for the “Add to Compare” button when not hovered

Font Size On Mouse Over: Adjust the font size for the “Add to Compare” button on mouseover

Width: Set the width of the “Add to Compare” button

Font Color Normal: Set the font color for the “Add to Compare” button when not hovered.

Font Color On Mouse Over: Define the font color for the “Add to Compare” button on mouseover

Background Color: Customize the background color for the “Add to Compare” button

Background Color on Mouse Over: Set the background color for the “Add to Compare” button on mouseover

Click “Save Changes” to apply the new settings. Your WooCommerce Product Compare buttons and tables will now have the customized appearance you specified

Configuring Text Settings:

Text on compare button in widgets/toolbar: Specify the text that will appear on the “Compare” button in widgets and toolbar

Text on add to compare button on shop: Personalize the “Add to Compare” button text

Add to compare button if product added: Enter the text displayed on the “Add to Compare” button when a product has already been added to the compare list.

Text on button for toolbar open: Customize the text that appears on the button for opening the product comparison toolbar

Text on clear list button on popup: Define the text that will be displayed on the button for clearing the comparison list within the popup

Once you have made the desired text customizations, click “Save Changes” to apply the new text settings. 

Javascript: 

Disable font awesome: Check this option if you want to disable the use of Font Awesome icons in the plugin

Font awesome version: Specify the font awesome version you want to use. You can choose from the following two options: 

  • Font Awesome 4
  • Font Awesome 5

Custom CSS: Add custom CSS code to style and modify the appearance of the plugin elements

Custom JavaScript code: Enter the custom JavaScript code

Click “Save Changes” after making any adjustments to ensure your JavaScript settings are applied properly