What is Tably?
Tably turns your WooCommerce catalog into a fast, scannable product table. Shoppers can search, filter by category, sort, and add products to the cart — one by one or in bulk — without leaving the page and without a single page reload.
It is built for B2B, wholesale, and catalog stores, where buyers know what they want and need to order quickly. Tably is lightweight by design: vanilla JavaScript only (no jQuery), and its CSS/JS load only on pages that actually contain a table.
Tably makes no external requests and stores nothing outside your own database. Settings live in a single option (tably_settings).
System Requirements
- WooCommerce must be installed and active. If it is missing, Tably shows an admin notice and does not load.
- Compatible with WooCommerce High-Performance Order Storage (HPOS).
- Works with any theme and any page builder that supports shortcodes (Elementor, Divi, etc.).
Installation
Upload the plugin
Go to Plugins → Add New → Upload Plugin and choose the tably-for-woocommerce.zip file. Or upload the folder to /wp-content/plugins/ via FTP.
Activate
Click Activate. Default settings are created automatically (5 columns, 20 products per page, AJAX add to cart).
Open Tably
A new Tably menu appears in the WordPress sidebar. General holds all display and behavior settings.
Install and activate WooCommerce before Tably. The plugin header also declares WooCommerce as a required plugin, so WordPress 6.5+ will prompt you automatically.
Quick Start
Choose your defaults
Go to Tably → General, pick columns, table style, and how many products per page. Click Save changes.
Add a table to a page
Edit any page and add the Tably Product Table block — or paste the shortcode [spt_table].
Publish and view
Visit the page. Search, filter, sort, and add to cart — everything works over AJAX.
No page setup wizard and no extra pages are created. A table appears only where you place the block or shortcode.
Columns & Table Styles
Tably offers six columns. Set the default set in Tably → General → Columns, or override per table with the columns attribute.
| Column | Shows |
|---|---|
| image | Product thumbnail (linked to the product page) |
| name | Product name, a short description excerpt, and a “Variable” badge for variable products |
| sku | SKU, or a dash when empty |
| price | Current price including sale price formatting |
| stock | In Stock, “N left” (5 or fewer, when stock is managed), or Out of Stock |
| cart | Quantity input and Add to Cart button |
| Product | SKU | Price | Stock | Add to Cart |
|---|---|---|---|---|
| Canvas Backpack | BP-210 | $49.00 | In Stock | Add |
| Steel Water Bottle | WB-044 | $18.50 | 3 left | Add |
| Desk Lamp | DL-905 | $32.00 | Out of Stock | Unavailable |
Table styles
Choose a style under General → Table style, or per table with style="...".
- Clean — minimal borders, soft header (default)
- Striped — dark header with alternating rows
- Bordered — full grid lines
Image size
The image column can use Small (thumbnail), WooCommerce default, or Medium. Choose a larger size only if you need sharper images; smaller keeps pages lighter.
Search, Filter & Sort
The toolbar above the table is built from three controls. Each can be turned on or off globally in General → Toolbar features or per table.
Pagination is also AJAX-powered, so changing pages never reloads the browser.
For a simple fixed list, use [spt_table ids="12,45,89" search="no" filter="no" sort="no"].
Add to Cart & Bulk Add
Per-row add to cart
Each row has a quantity input and an Add button. The quantity maximum follows the product’s managed stock quantity when one is set.
| Mode | Behavior |
|---|---|
| AJAX | Adds without a reload and shows a toast notification with a View Cart link (default). |
| Direct | Uses the standard WooCommerce add-to-cart link and redirect behavior. |
Bulk add to cart
Tick the checkbox on any number of rows (or use select all) and a bar appears showing how many items are selected, with an Add selected to cart button.
- Bulk selection is available for simple, in-stock, purchasable products.
- Variable and out-of-stock products show a dash instead of a checkbox.
- Turn it off for one table with
bulk="no".
Variable products show a Select options link to their product page. Inline variation selection is part of Tably Pro.
Mobile Layout
On screens up to 768px wide, wide tables are hard to read. Tably gives you two options, set in General → Mobile layout:
| Option | Result |
|---|---|
| Stacked cards | Each row becomes a card. Every value gets its own labeled line (PRICE, STOCK, SKU…). No horizontal scrolling. Default. |
| Scroll | Keeps the table layout and lets visitors scroll sideways. |
Override it for a single table with mobile="stack" or mobile="scroll". The card layout works with AJAX search, filtering, and pagination too.
Gutenberg Block
Search for Tably Product Table in the block inserter (it is in the WooCommerce category). The editor shows a live preview that matches the front end exactly, because both are rendered by the same server-side code.
| Sidebar panel | Controls |
|---|---|
| Products | Category, tag slug, product IDs, products per page, order by, order |
| Columns | Pick any of the six columns (leave empty to use your global columns) |
| Display | Search, sort, category filter, bulk add, table style, mobile layout |
Every option defaults to Use global setting, so a plain block always follows Tably → General. Change an option only when one table should look different.
The block supports wide and full alignment. Prefer shortcodes? They work exactly as before.
Template Override
To customize the table markup, copy templates/table.php from the plugin to your theme:
// Copy this file… /wp-content/plugins/tably-for-woocommerce/templates/table.php // …to your theme /wp-content/themes/your-theme/tably/table.php
Row output (table-row.php) and pagination are loaded from the plugin directly. To change what a row shows, use the tably_row_cell filter described under Hooks & Filters.
When you update Tably, compare your copy with the plugin’s latest table.php so you do not miss new markup.
Shortcode
Tably registers two names for the same shortcode. Use whichever you prefer:
[spt_table][tably-for-woocommerce]Examples
[spt_table category="electronics" limit="15"][spt_table columns="image,name,sku,price,cart"][spt_table ids="12,45,89" search="no"][spt_table orderby="price" order="asc" style="striped"][spt_table mobile="scroll" bulk="no"]All attributes
| Attribute | Default | Description |
|---|---|---|
| limit | 20 | Products per page (1–200) |
| columns | image,name,price,stock,cart | Comma-separated list from: image, name, sku, price, stock, cart |
| category | — | Category slug or ID |
| tag | — | Product tag slug or ID |
| ids | — | Comma-separated product IDs |
| orderby | menu_order | menu_order, title, date, price, popularity, rating, rand |
| order | desc | asc or desc |
| search | yes | Show the search bar: yes or no |
| sort | yes | Show the sort dropdown: yes or no |
| filter | yes | Show the category filter: yes or no |
| style | clean | clean, striped, or bordered |
| mobile | stack | stack (cards) or scroll |
| bulk | yes | Bulk add to cart: yes or no |
Search, sort, filter, style, columns, limit, and mobile defaults are read from Tably → General. An attribute on the shortcode always wins.
All Settings
All settings live under Tably → General and are saved in one option, tably_settings. You need the manage_woocommerce capability to change them.
| Setting | Default | Options |
|---|---|---|
| columns | image, name, price, stock, cart | image, name, sku, price, stock, cart |
| table_style | clean | clean, striped, bordered |
| limit | 20 | 1 – 200 products per page |
| image_size | thumbnail | thumbnail, woocommerce_thumbnail, medium |
| show_search | yes | yes / no |
| show_sort | yes | yes / no |
| show_filter | yes | yes / no |
| add_to_cart | ajax | ajax, direct |
| mobile_layout | stack | stack, scroll |
Other admin pages: Shortcodes (copy-ready examples and the attribute reference) and Stats (pages that currently use a table). Pro Features previews what Tably Pro adds.
Hooks & Filters
Tably keeps its hook surface small. These filters are the supported extension points.
tably_columns
Filter the active column list before the table is rendered — for example, to add a custom column key.
add_filter( 'tably_columns', function ( $columns ) { $columns[] = 'brand'; return $columns; } );
tably_row_cell
Output the cell content for any column key that is not one of the six built-in columns. Receives the default output, the column key, and the WC_Product.
add_filter( 'tably_row_cell', function ( $output, $col, $product ) { if ( 'brand' === $col ) { return esc_html( $product->get_meta( '_brand' ) ); } return $output; }, 10, 3 );
Output from tably_row_cell is printed as-is. Always escape it with esc_html(), esc_url(), or wp_kses_post().
tably_pro_row_cart_cell
Replaces the “Select options” link for variable products. Used by Tably Pro for inline variation dropdowns.
To add a custom column key, also make sure it is included in the shortcode columns attribute, or add it through tably_columns.
Tably Pro
Tably is fully functional for free. Tably Pro is a separate add-on for stores that want more power. You can preview it in Tably → Pro Features.
Learn more at webtend.net/tably-pro.
Frequently Asked Questions
Does it work with variable products?
Will it slow down my site?
Can I put multiple tables on one page?
Is it compatible with Elementor, Divi, or other page builders?
Is it compatible with WooCommerce HPOS?
How do I customize the table’s appearance?
table.php in your theme (see Template Override) or add your own CSS targeting the .tably- classes.Why do some products have no checkbox for bulk add?
Is the plugin translation ready?
tably-for-woocommerce text domain and a .pot file is included in /languages.How do I get support?
Version History
mobile shortcode attribute