The Product Table widget by Atomic Addons lists your WooCommerce products as rows of a table: thumbnail, name, short description, categories, tags, rating, price, a quantity field and an add to cart button, plus a Quick View button. Shoppers can search the table, sort it by a column and page through it, then buy without leaving the page, which suits order forms and catalogs with many similar products. This guide covers adding the widget, choosing the products and the columns, and the table's tools.
Enable the Product Table Widget
Product Table is a Pro widget and needs Atomic Addons Pro and WooCommerce. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Product Table. You can also open the WooCommerce category.
- 4
Turn the Product Table widget on.
- 5
Click Save Settings.
Add the Product Table Widget
Product Table works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Product Table. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Layout
(Open the full-size image in a new tab)Open the widget and go to Content → Layout. Besides alignment, this is where you switch on the table's tools:
- 1
Header Alignment: Left, center or right alignment of the column headings.
- 2
Data Alignment: Left, center or right alignment of the cells.
- 3
Search: A “Search:” box above the table. As the shopper types, the table keeps only the rows that contain the text. Off by default.
- 4
Pagination: Splits the rows into pages of 10, with “Previous” and “Next” links and page numbers under the table. Off by default, which shows every row.
- 5
Footer Info: With pagination: a line such as “Showing 1 to 6 of 6 entries” under the table.
- 6
Length Select Field: With pagination: a “Show 10 entries” menu that lets shoppers show 10, 25, 50 or 100 rows per page. On by default.
- 7
Ordering: Lets shoppers sort the table by clicking a column heading: Title, Description, Categories or Price. On by default.
(Open the full-size image in a new tab)The search, sorting and pages work in the shopper's browser on the products the widget loaded, so Limit in the Query section is the most the table can hold; pages don't load more products.
The Cart column shows WooCommerce's own button for each product: Add to cart for a simple product, Select options for a variable one (it opens the product page), and for an external product the button text set on the product, such as “Buy at partner” here. The Quantity column has a number field for simple products that are in stock; the button then adds that many. Out-of-stock products show “Out of stock” there, and other product types leave it empty.
Query
(Open the full-size image in a new tab)Content → Query decides which products appear, and the last two controls set how the table is sorted when the page opens:
- 1
Source: Product, the default, picks from all your products with the filters below. Manual Selection shows only the products you search for and pick. Current Query shows the products of the page being viewed — the shop, a category, a tag or search results; the editor may not show them until you save and reload. Related shows, on a product page, products by the same author as the one being viewed; narrow it down with Include By → Terms, and add Exclude By → Current Post to leave out the product itself.
- 2
Limit: How many products the table loads, 6 by default. This is also the most it can show across all its pages.
- 3
Include / Exclude: Include By keeps only products in the Terms you pick (categories or tags) or by the Authors you pick. Exclude By leaves out terms, authors, the Current Post or products you pick with Manual Selection.
- 4
Offset: Skips this many products from the start of the list.
- 5
Date: Only products published in the past day, week, month, quarter or year, or between a Before and an After date with Custom.
- 6
Order By: Date (the default), Title, ID, Author, Comment Count, Menu Order, Random, Price or Sales.
- 7
Order: DESC puts the newest, most expensive or best-selling first; ASC reverses it.
- 8
Show Product: All Products, only products On Sale, or only Featured products.
- 9
Hide Free Product: Leaves out products with no price.
- 10
Hide Out of Stock: Leaves out products that are out of stock.
- 11
Sort Table By: The column the table is sorted by when the page opens: Default keeps the order set above, or pick Title, Description, Categories or Price. The column must be switched on, and so must Ordering in the Layout section; without it the table keeps the order set above.
- 12
Sort Direction: Descending (the default) or Ascending for that column.
Only Featured Image Post leaves out products without an image. Query ID is for developers: it gives the query a name that custom code can filter.
With Current Query the page's own query decides which products show and in what order, so the filters and order settings are hidden. Limit still sets how many appear.
Columns
(Open the full-size image in a new tab)Content → Additional Options switches the columns on and off:
- 1
Show Thumbnail: The Image column: a small thumbnail, linked to the product. On by default.
- 2
Open Thumb in Lightbox: Clicking a thumbnail opens the full-size image in Elementor's lightbox instead of the product page.
- 3
Title: The Title column: the product name, linked to the product. On by default.
- 4
Title HTML Tag: The name's markup: H1 to H6, div, span or p. H2 by default.
- 5
Description: The Description column: the product's short description. On by default.
- 6
Description Limit: How many words of it to show, 10 by default.
- 7
Rating: The Rating column: stars for products with reviews, empty for the rest. On by default.
- 8
Price: The Price column, with the regular price struck through while a product is on sale. On by default.
- 9
Categories: A Categories column with the product's categories, linked. Off by default.
- 10
Tags: A Tags column with the product's tags, linked. Off by default.
- 11
Quantity: A Quantity column with a number field for simple products. Off by default.
- 12
Add to Cart: The Cart column with each product's add to cart button. On by default.
- 13
Quick View: A Quick View column with a button that opens the product in a popup. It appears only while the Quick View extension is on (Atomic Addons → WooCommerce → Extensions). Off by default.
- 14
SHOW / HIDE: A “hide on” field for each column you switched on, such as Thumbs hide on or Price hide on. Pick Desktop (1024px and wider), Tablet (768 to 1023px) or Mobile (767px and narrower) to hide that column on those screens, which keeps the table readable on phones.
Style the Product Table
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Table — the heading row's Text Color, Background Color and typography; Cell Border with its width and color; Cell Padding; Hover Effect, which highlights the row under the pointer; and Stripe (on by default) with Odd Row Background, Even Row Background and a hover Row Background Color.
- Search Field — the “Search:” label's color, typography and spacing, and the box in Normal and Focus states.
- Length Select Field — the row count menu in Normal and Focus states.
- Image — the thumbnail's border, radius and shadow.
- Title, Description, Categories, Tags and Price — colors and typography. Price has separate Regular Color and Sale Color.
- Rating — the Color of empty stars and the Active Color of filled ones.
- Quantity — the field's color, border color and typography.
- Cart — the button in Normal and Hover states; Fullwidth Cart stretches it across the column.
- Footer — the page links (Pagination tab) and the “Showing…” line (Page Info tab).
If no product matches the query, the widget shows a short notice in place of the table.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.