The Product Compare extension by Atomic Addons lets shoppers pick products and compare them side by side — price, rating, stock, description and more. A floating bar keeps track of their picks, and the comparison can live in My Account, on a page of its own or in a popup. This guide covers the button, the comparison page and the table.
Enable the Product Compare Extension
(Open the full-size image in a new tab)WooCommerce must be installed and active. Then switch the extension on from the Atomic Addons dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Under WooCommerce, click Extensions.
- 3
Find the Product Compare card and turn its switch On.
- 4
Click Open to open the extension's settings.
Configure the Compare Button
(Open the full-size image in a new tab)- 1
Button label: The button's text. The default is “Compare”.
- 2
Label after adding: The text once the product is in the comparison. Clicking it again removes the product.
- 3
Show on shop / archive: Adds the button to product cards on shop and category pages.
- 4
Position in loop: After add-to-cart button, Before add-to-cart button or Over the product image.
- 5
Show on single product: Adds the button after the add-to-cart button on product pages.
- 6
Show floating compare bar: Shows a bar at the bottom of the screen with the number of products picked, a View comparison button and Clear.
- 7
Maximum products: How many products can be compared at once, from 2 to 6.
Choose Where the Comparison Opens
(Open the full-size image in a new tab)- 8
Primary compare URL (for buttons / bar): My Account tab, WordPress page (an Elementor-editable /compare/ page), or Shortcode / Elementor widget only, which opens the comparison in a popup.
- 9
Show in My Account menu: Adds a Compare tab to My Account.
- 10
Compare page (optional): The page to use. Leave it on auto-detect to use a page with the slug compare.
- 11
Button link URL: Shows where the buttons and the bar link to.
- 12
My Account tab URL: Shows the address of the My Account tab.
For a comparison page, create a page with the slug compare and add the [atomel_compare] shortcode or the Compare Products widget to it. My Account pages ask visitors to log in, so choose a page if guests should be able to compare.
Pick the Table Fields
(Open the full-size image in a new tab)- 13
Fields to compare: Tick the rows of the table: Image, Title, Price, Rating, Description, SKU, Stock, Weight, Dimensions, Categories and Add to cart.
- 14
Save Compare settings: Click to save your changes.
Use Compare in Atomic Addons Widgets
(Open the full-size image in a new tab)In the Product Grid, Product Carousel and Product List widgets, open Content → Settings (Additional in Product List), go to the Action btn tab and switch on Compare. The Compare Products widget shows the comparison table on any page and has style settings for the table, images, titles, prices and buttons.
Final Preview
(Open the full-size image in a new tab)Shoppers add products with the Compare button, and the floating bar keeps count.
(Open the full-size image in a new tab)The comparison shows one column per product, with the fields you picked. Each product can be removed from the table with its ×.
Logged-in customers' comparison lists are saved to their account; guests' lists are kept in a browser cookie for 30 days.
All done! You have successfully set up the Product Compare extension on your store.
Thanks for being with us.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.