The Compare element gives WooCommerce customers quick access to their current product comparison list directly from the website header. It works together with Blocksy Pro’s Compare View module from the Shop Extra extension.
To make the element available, navigate to Blocksy → Extensions → Shop Extra and activate the Compare View module. You can then open the Customiser → Header and drag the Compare element into the desired header row.
Selecting the element on the front end gives visitors access to the comparison interface configured through the Compare View module.
Granular Controls
Icon Source
Choose the icon used to represent the Compare element in the header. Blocksy provides three built-in designs, or you can upload a custom SVG icon to match the rest of your website’s interface.
Icon Size
Adjust the size of the Compare icon independently for the available responsive device views, allowing it to fit naturally into desktop, tablet and mobile header layouts.
Icon Badge
Enable the Icon Badge to display the number of products currently stored in the visitor’s comparison list.
The badge updates as products are added to or removed from the comparison queue, giving visitors an immediate indication of how many products are ready to compare.
Label Visibility
Control whether the element’s text label is displayed on desktop, tablet and mobile devices independently. This lets you use a descriptive label where space allows while keeping a compact icon-only presentation on smaller screens.