Adding & Customizing Product Compare Button
To add and customize the product compare button on your WooCommerce store using the WooCommerce Product Compare plugin, follow these steps:
Open your WordPress admin dashboard and log in.
In the left-hand menu, go to “WooCommerce” click on “Settings” and then “Product Compare.”
Within the Product Compare settings, find and click on the “Style” tab. This is where you can customize the appearance of the compare buttons and tables.
Customize Widgets Compare Button:
Adjust these settings to customize the appearance of the compare button in widgets:
- Border Width
- Border Radius
- Size
- Border Color
- Font Color
- Background
Customize Toolbar Compare Button:
Configure these settings to customize the appearance of the compare button in the toolbar:
- Border Width
- Border Radius
- Size
- Border Color
- Font Color
- Background
Customize Toolbar Open Button:
Customize the appearance of the open button in the toolbar:
- Border Width
- Border Radius
- Font Size
- Width
- Height
- Button Position
- Border Color
- Font Color
- Background
Customize Popup Table:
Adjust these settings to customize the appearance of the table in the popup:
- Border
- Image Width
- Font Color
- Table Body Color
- Background Color
- Padding Outside Top
- Padding Outside Bottom
- Padding Outside Left
- Padding Outside Right
Customize Compare Page Table:
Configure these settings to customize the appearance of the table on the compare page:
- Border
- Image Width
- Font Color
- Background Color
- Padding Outside Top
- Padding Outside Bottom
- Padding Outside Left
- Padding Outside Right
Customize Cross Button on Popup:
Customize the appearance of the cross button on the popup:
- Icon Size
- Icon Color
- Icon Color on Mouse Over
- Background Color
- Button Width
- Button Height
- Padding Left
- Padding Right
- Padding Top
- Padding Bottom
Customize Popup Clear List Button:
Adjust these settings to customize the appearance of the clear list button in the popup:
- Font Size Normal
- Font Size On Mouse Over
- Padding Top
- Padding Bottom
- Font Color Normal
- Font Color On Mouse Over
- Background Color Normal
- Background Color On Mouse Over
Customize Compare Page Clear List Button:
Configure these settings to customize the appearance of the clear list button on the compare page:
- Font Size Normal
- Font Size On Mouse Over
- Padding Top
- Padding Bottom
- Font Color Normal
- Font Color On Mouse Over
- Background Color Normal
- Background Color On Mouse Over
Customize “Add to Compare” Button:
Adjust these settings to customize the appearance of the “Add to Compare” button:
- Font Size Normal
- Font Size On Mouse Over
- Width, Font Color Normal
- Font Color On Mouse Over
- Background Color
- Background Color on Mouse Over
Save Changes:
After customizing the button appearances, scroll down and click the “Save Changes” button to apply the new settings.
By following these steps, you can add and customize the product compare button on your WooCommerce store according to your preferences using the WooCommerce Product Compare plugin.