The Comparison Table is an indispensable feature of an online shop nowadays that helps the user to have a better overview of the desired products by having them displayed along with their specifications one next to the other. To activate, go to Settings > Sparks in your admin dashboard.
In order to see it on your website, you have to click on the ➕ button:
Then, all the added products will appear at the bottom of the screen and, to access the comparison table, you will have to click on Compare.
Customizing the Comparison Table #
Navigate to Global Appearance > Customize > WooCommerce > Product Comparison. There you will find six panels with options:
General #
In this section, you will find the following options:
- Choose Comparison Product Page – the page where the comparison table will be shown. It can be different from the Comparison Table one.
- Number of Products Limit – the maximum number of products that can be compared at the same time can be chosen here as well ( maximum 4 ).
- Compare Checkbox Position – the position of the add to comparison button that is displayed on the product thumbnail on archive pages or sections as Related Products ( top / bottom ).
Table Style #
Table Style #
The table style tab provides options for color changing of the following elements:
- Table rows background
- Table header text
- Table text
- Table borders
All items that have a similar appearance, such as product names, the add to cart button, and the icon for removing a product from the comparison table are inherited from the Primary Accent color available in the Customizer > Colors & Background.
Category Restriction #
The category restriction allows setting a rule:
- Exclude categories – which means that products within these categories can’t be compared.
- Include categories – which means that only products within these categories can be added to the comparison table.
Table Layout #
This panel allows the table rows to be sorted as desired, except for the product attributes which will act as a group.
You also have the possibility to modify the visibility of some elements, if you click on the 👁 icon.
The layout can be changed from columns to rows, and horizontal scroll will be enabled by default.
Related Products #
By enabling this option, products related to the ones within the comparison table will be listed below.
Sticky Bar #
The sticky bar where the comparison table can be opened is displayed at the bottom of the page if at least one product was added to the comparison.
These options allow customizing:
- Bar background color – boost the table’s appearance by using the Gradient option that can be accessed from the BG color.
- Text color
- the style of the compare products button – Primary / Secondary.
