Overview
The Compare feature allows users to compare multiple products side by side based on their attributes and details.
Enable Compare in Header #
To display the Compare icon in the header, go to:
Appearance → Customize → Header → Header General
- Compare – Enable this option to show the Compare icon.
Then configure its header settings from:
Appearance → Customize → Header → Compare
- Compare Style – Classic, Icon, Text
- Compare Count – Show or hide item count
Compare General Settings #
You can manage the main Compare functionality from:
Appearance → Customize → WooCommerce → Compare
- Guests Can Add Items – Allow or restrict guest users
- Compare Table Style – Style 1, Style 2, Style 3
- Compare Page – Select the page where you placed the [gromark_compare] shortcode
- Notification Type:
- Type 1 – Bottom Corner
- Type 2 – Popup
- Max – Maximum number of products that can be compared
- Show Thumbnail
- Show Product Name
- Show Rating
- Show Price
- Show Stock
- Show Attributes
- Show Add to Cart
Add Compare to Product Page #
To display the Compare button on single product pages, go to:
Appearance → Customize → WooCommerce → Action Buttons
Inside the Action Buttons field, you can enable:
- Compare
- Wishlist
- Size Guide
- Contact
Select Compare to display it on product pages.
Add Compare to Product Listings #
To display the Compare button on product listing (shop) pages, go to:
Appearance → Customize → WooCommerce → Product Box
- Compare Button – Enable this option to show it in product cards.
Tip: The Compare feature helps users make better purchasing decisions by viewing product differences side by side.
