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