How To Use The Compare Products Widget By Atomic Addons

The Compare Products widget by Atomic Addons shows the products a shopper picked with the Product Compare extension in a side-by-side table: one column per product and one row per detail, such as price, stock and description. The extension shows the same table in My Account or in a popup; this widget lets you put it on a page you design in Elementor and style it. This guide covers adding the widget, what it shows and its styles.

Enable the Compare Products Widget

Compare Products is a Pro widget and needs Atomic Addons Pro, WooCommerce and the Product Compare extension. The widget appears in Elementor only while the extension is on, so switch that on first: go to Atomic Addons, under WooCommerce click Extensions and turn on the Product Compare card. Then switch the widget on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Compare Products. You can also open the WooCommerce category.

4. 4

   Turn the Compare Products widget on.

5. 5

   Click Save Settings.

Add the Compare Products Widget

(Open the full-size image in a new tab)

The usual home for the widget is your compare page. Create a page with the slug compare (or pick a page in the extension's settings), then:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Compare Products. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The widget has no Content settings, so it opens on the Style tab.

The floating compare bar's View comparison button leads where the extension's Primary compare URL says: the My Account Compare tab (the default), your compare page with WordPress page, or a popup with Shortcode / Elementor widget only. The My Account tab shows your compare page when the page is built with Elementor, so your design carries over there too. If the page can't be found, the button falls back to the My Account tab while Show in My Account menu is on.

What the Widget Shows

(Open the full-size image in a new tab)

The table has a column for each product in the shopper's list, up to the extension's Maximum products (four by default), and a row for each field ticked under Fields to compare. The default fields are Image, Title, Price, Rating, Description, Stock and Add to cart, as in the screenshot. A few details:

• Description is the product's short description, or its description when there is none, cut to 30 words.
• Rating shows the average rating as stars. Products without reviews show a dash.
• Add to cart is WooCommerce's own button: Add to cart, Select options for a variable product, or an external product's own text.
• A field a product has no value for, such as a missing SKU or weight, shows a dash.

Each product has a × on its image (or in a row above the table when Image is not a field). It removes the product and reloads the table without reloading the page. With nothing left to compare, the widget shows “No products to compare yet.”

Each visitor sees their own list: a logged-in customer's is saved to their account and a guest's is kept in a browser cookie. In the editor you see your own list, so add a few products to it while you design.

Style the Compare Products

Compare Table

The table itself (numbered in the editor screenshot above):

1. 1

   Border Type: A border around every cell. Once you pick a type, set its width and color.

2. 2

   Cell Padding: The space inside every cell, per device.

3. 3

   Odd / Even: The background of the odd and the even rows, each a color or a gradient.

Remove Button

The × buttons: Color, background and Border in the Normal state, and the color and background on Hover.

Image

The product images: Border, Border Radius and Box Shadow.

Title

The product names: Color, Hover Color and typography.

Price

Color of the current price, Regular Price Color of the struck-through price of a product on sale, and the typography.

Add to Cart

The buttons in the Add to cart row: text Color, background (a color or a gradient) and typography.

Field Labels

The Color and typography of the row labels in the first column, and the Value Color and typography of the cells.