Creating product tables
Once you've installed the WooCommerce Product Table plugin and activate it for the first time, a setup wizard will open automatically. As well as prompting you to activate your license key, this guides you through the process for setting up your first table.
You can launch the table builder at any time to create additional tables. Do this at Products → Product Tables → Add New.
The table builder lets you create as many tables as you like and then insert them anywhere on your site using a Gutenberg block or shortcode. This is the most user-friendly option but if you prefer, then you can create tables directly in a shortcode.
The table builder takes you through the following steps:
Create a table
Table name - Choose a name for the table. This will only be used in the WordPress admin and not displayed on your site.
How do you want to add the table to your store?
- Add to a page using a block or shortcode - Choose this option if you want to manually add the product table to a normal page or post, a widget, or use a shortcode to insert it elsewhere on your site.
- Display on a shop page (e.g. main storefront, category page, etc.) - Choose this option if you want the table to replace the default layout in any or all of your store template pages. For example, do this if you want to replace the existing layout on your main shop page (which is created by WooCommerce itself) with a product table.
Content
This page only appears if you selected "Add to a page using a block or shortcode" on the previous page. Use it to choose which products to include in the table.
By default, "All products" is selected and will list all the products in your store in the table. To show specific products only, select "Show specific products" and choose from the options which appear below:
- Categories - Select one or more product categories. If you select a parent category then the products from its sub-categories will also be included.
- Tags - Select one or more product tags.
- Individual products - Select one or more specific products.
- Custom fields - Display products with a specific custom field value. For example if you have created a "Reference number" custom field then you can select products with a specific reference number. Enter the following information for each custom field that you wish to include:
- Name - The name of the custom field, e.g. "Reference_number".
- Value - The value of the custom field, e.g. "Ref-123".
- Attributes and custom taxonomies - All the product attributes and taxonomies in your store will be listed here. For each one you select, you can then select the terms that you want to display the products for. For example, you might have a "Color" taxonomy and wish to display all "Blue" products.
- Product type - Select which product types you wish to display, e.g. Simple or Variable products.
- Status - Select which statuses you wish to display, e.g. Published, Draft or Private.
- Stock - Select which stock statuses you wish to display products for, e.g. "In stock" or "On backorder".
Location
This page only appears if you selected "Display on a shop page (e.g. main storefront, category page, etc.)" on the previous page. Use it to choose which template-generated pages you want to use the table on.
The templates listed on this page will depend on which templates are available in your store. As a result, the list will differ from the screenshot above.
If you have already created other tables and selected templates then these tables will be greyed out, as you can see in the screenshot above. This prevents you from accidentally selecting the same table for multiple templates.
Columns
Next, select which columns you wish to appear in the table. Remove any of the default columns that you don't require, and use the "Choose a column" button at the bottom to add new ones.
For each column, you can click the pencil icon to reveal additional options for changing the column name or hiding the column heading completely.
Use the dots on the left of each column to change the order. The columns listed at the top will appear to the left of the table, and you can re-order them as required.
If you need more advanced column options then you can find additional settings on the Edit table screen later. These allow you to control the width and responsive settings for each column.
Discover the full list of columns.
Add to cart
These options affect the 'Buy' column in the product table. If you haven't included this column then they will be ignored.
Add to cart method
- Cart buttons – The default option. Displays the standard add to cart button for each product, or if the product cannot be purchased (out of stock, grouped product, etc), then a Read More or View Products link is displayed.
- Checkboxes – Displays a checkbox next to each button instead of an add to cart button. Customers can select multiple products at once and then click an 'Add Selected to Cart' button above or below the table.
- Cart buttons and checkboxes – Displays both the add to cart button and checkbox.
Note: You can customize the add to cart button text on the plugin settings page.
Quantities
Choose whether or not to include a quantity picker in the buy column.
Variations
Decide how product variations will be displayed in the table:
- Show as dropdown lists - Each variable product will take up one row of the table, with one or more dropdowns allowing customers to select the variations.
- Show one variation per row - Each individual variation will appear on a separate row of the table with its own add to cart button. For example, if a product has 4 variations then this will take up 4 rows of the table.
- Read more button linking to the product page - Instead of showing variations in the table, variable products will have a "Read more" button linking to the single product page.
Variation name format
This only appears when "Show one variation per row" is selected. By default, the 'Name' column will display the product name followed by a hyphen and a list of the attributes used for each variation (e.g. "Ninja Hoodie - White, Large"). You can change this using the dropdown:
- Name + attributes
- Name only
- Attributes only
For more information about each option, read our article about product variations.
Search & sort
Use this page to make it easier for customers to find products.
Filters
Tick 'Enable filter dropdowns' to reveal options for selecting which filters to display above the product table. This is similar to adding columns, with a pencil icon for renaming each filter.
Note: WooCommerce Product Table also comes with filter widgets which can appear in your page sidebar. Or for more advanced visual filters, you can use it with our WooCommerce Product Filters plugin.
Sort products by
Select from the dropdown to choose how the products will be sorted when the table first loads. Customers can then click on a column heading to re-order the table.
You can learn more about the sort options in our article about sorting the table. We also have an article about how to sort by date.
Sort direction
Choose which direction the products will be sorted in when the table first loads.
Additional table controls
In addition to the options on this page, a search box will automatically appear above the table along with other controls such as the total number of products. You can show, hide or reposition these on the plugin settings page.
Performance
Enable lazy load to improve performance by loading the overall page before the product table, and loading 1 page of products at a time. We only recommend enabling lazy load if you have a lot of products in the table or are experiencing slow load times. That's because due to the way it works, it necessarily limits or changes some of the table behavior. You can learn more about this in our article about lazy load.
There is also a caching option which you can enable on the plugin settings page for even faster performance.
Table created!
The final page of the table builder will explain how to add the table to your site. If you selected for it to appear on certain Shop Templates on the 'Create' step, then you don't need to do anything further. Alternatively, you can add the table anywhere on your site by either inserting the 'Product Table' Gutenberg block and selecting the table you just created; or by copying and pasting the shortcode which is displayed on this page.
Where to find additional options
By design, the table builder includes the most commonly used options for creating a product table. You can find additional settings in the following locations:
- The 'Edit Table' screen (Products → Product Tables → Edit) contains the following additional options:
- Edit the table columns and click on the 'Advanced Settings' to find options for controlling the column widths and a range of options for changing how the table behaves on different screen sizes and devices.
- A 'Product limit' option for setting a maximum, number of products which can appear in the table.
- An 'Image size' option for changing the size of the image in the 'Image' column of the table.
- The plugin settings page (Products → Product Tables → Settings) contains the following additional options:
- Options for customizing the 'Add selected to cart' button.
- Description length.
- Show hidden products in the table.
- Show table footer.
- Show or hide the search box.
- Show, hide or reposition the total number of products found.
- Show or hide the reset button.
- Control the number of products shown per page of the table.
- Show, hide or reposition the option to allow customers to choose how many products to show per page.
- Show, hide, reposition or change the style of the pagination buttons for tables with multiple pages.
- Control how extra data is displayed when there are too many columns to fit in the table.
- Customize the table design and styling.
- Use AJAX when adding to the cart.
- Show shortcodes, HTML and other formatting in the table.
- Cache table contents to improve load times.
- Change the way that dates are formatted in the table.
- Customize the wording of the messages that appear when no products are found in the table.
- Add a scroll offset to ensure the table displays correctly with the sticky header in your theme.