How to display products in tables in WooCommerce

Decide whether the table is only for browsing or whether customers must search, filter, choose quantities, select variations and add several products to the cart. A simple catalogue can link each row to its product page. A wholesale or bulk-order table needs more than plain HTML.

For variable products, list the required attributes and decide whether shoppers should select them in the table or on the individual product page.

For a grid or product listing, edit the page and add a Product Collection block, or add a Shortcode block containing [products]. WooCommerce supports filtering that output by product IDs, SKUs, categories, attributes and tags, along with sorting and pagination. These built-in tools display products in a grid or collection layout rather than a true table.

This route is fine when shoppers do not need to compare rows or add multiple products at once. Preview the page on mobile before publishing because a grid may be easier to use than a wide table on a small screen.

For a small catalogue, add an HTML table to a page using the Custom HTML block. Create columns such as Product, SKU, Price, Stock and Details, then add one row per product. Link the product name or button to the product page so WooCommerce handles the normal purchase process.

This manual route is suitable for a handful of simple products, but it becomes a maintenance problem when prices, stock or product names change. Do not treat a plain HTML button as a working WooCommerce add-to-cart system. Variable products also need a valid variation selection before they can be added to the cart, so send shoppers to the product page unless you have a proper variation-table implementation.

Use a product-table extension when you need sortable columns, search, filters, quantity fields, bulk add-to-cart actions, or a responsive layout. Check that it supports the product types in your catalogue, especially variable products, and that it can show stock, prices and the attributes shoppers need.

Most table extensions create a table in their own settings screen and provide a shortcode for placing it on a page. The exact menu names differ, but the usual workflow is to create a table, choose the products, select and reorder columns, configure display rules, then copy the generated shortcode.

Include only the products relevant to that page, then choose useful columns such as image, product name, SKU, price, stock, quantity and add-to-cart control. Keep the table narrow enough to read on mobile. If the extension supports filters, expose only filters that match real product attributes or categories.

For variations, confirm whether the table shows each variation as a row, replaces the normal dropdowns, or links to the single product page. Test unavailable combinations and out-of-stock variations, because a table can otherwise show an option that cannot be purchased.

Copy the table shortcode into a Shortcode block, page, post or widget area supported by your site. Publish or update the page, then test product links, filters, pagination, quantities, variation choices, add-to-cart actions and the cart contents.

Test while logged out as well as logged in, and check both phone and desktop views. The common Friday problem is a table that looks correct but sends the wrong variation, ignores quantity changes, or stops working after a theme or WooCommerce update. Keep a staging copy and retest after updates.