In order to customize the table functionality and design, open the “Settings” tab which includes:
In this tab, you can set the Table elements
Caption. Check if you want to show the name of the table above the table.
Description. You can add a short description to the table between title and table.
Signature. You can add a signature under table footer.
Header. Check if you want to show the table head.
Footer. Check if you want to show the table footer.
Fixed Header allows fixing the table’s header during table scrolling.
Important! Header option must be enabled for using this feature.
Date. Let output format for the date. For example: y-m-d- 1991-12-25, d.m.y – 25.12.1991
Time / Duration. Set output format for time and duration. For example: 1) time – H:m – 18:00, h:m a – 9:00 pm 2) duration h:m – 36:40, h:m:s – 36
Here you can activate additional functions to work with the table:
Table information. Show pagination information after the table.
Sorting. Allow dynamic sorting with arrows. To use this option you must enable Header option.
You have an option to select the column to sort by default. Works only with relevant columns enabled.
Auto-sorting descending. The default is the 1st column and “Ascending” order for the sorting. Enable the checkbox if you want to sort by descending.
Custom sorting. Enable the checkbox if you want to add a sort by drag-n-drop from the admin table preview to the frontend. To set the custom sorting, move to the Content tab, add the products to the table, and drop and drag them in the exact order you need:
Moreover, you can set the order for the product manually. You can easily replace the item to the necessary position. It is a more convenient way if the table contains a big number of products. Also, this is the only way to move the product to the next or previous page due to pagination.
The order will be saved in the way you set it and will display in a table.
Pagination. Show table pagination.
If Pagination menu is enabled, in Pagination list content you can set the number of rows to display on one Pagination page. Establish several numbers separated by a comma to let users choose it personally. The first number will be displayed by default. Since that the number of Pagination Pages will be recounted also.
Server-side Processing – this option is recommended for large tables that cannot be processed in a conventional way. The table will be sequentially loaded by ajax
on a per-page basis, all filtering, ordering and search clauses is server-side implemented too.
Searching. Enable to add an instant search by keywords.
Search by Columns. Add search by table columns. Use a semicolon as a separator to select any of the values.
Print. Print the product data straight away from the table in one click.
Also, you can save your table as PDF file by choosing to save as pdf at the new window in destination settings.
Print captions. If enabled, you can print the table caption, description and signature.
Hide the out of stock items helps you to hide all of the products that ended.
Show private products feature needs to display products on the front-end.
Show variation thumbnails – if you have different pictures for a variable product, the thumbnail will be changed that the user selects the variation.
Show the first variation as default – preselection of variation for variable products instead of the name of an attribute.
Show variation price in price column – the price of selected variation will be in the Price column instead of the price range + price of the selected variation in Buy column.
Add all to cart feature allows you to add all current products on the table to the cart.
Add selected to cart allows your customers to select a number of necessary products and add everything to the cart in one go.
Hide view cart link – you can hide a link “view cart” after customer added a product to the cart if you need.
Hide quantity input feature allows you to hide quantity input for add to cart button in the frontend.
- Attribute filter – enable attribute filter and select attributes to filtering.
Hide searching attributes from a table – if you have too many attributes or don’t want to show them in a table, you can hide them using this option, but still using filter to search by.
Attention: you don’t need to add attributes as a column to make filters available. Selected filters will be displayed. If you will add some attribute as a column manually, it will not be hidden even is “Hide searching attributes from a table” is enabled.
Search for a specific attribute – Results includes all products where the attribute exactly matches the search criteria, f.e:
- Custom taxonomy filter feature allows you to categorize information based on different attributes.
- Category filter. Enable category filter and filtering by categories of product.
Hide searching category from a table – if you don’t want to show them in a table, you can hide categories column using this option, but still using the filter to search by.
Attention: you don’t need to add the category as a column to make filters available. Selected filters will be displayed. If you will add the category as a column manually, it will not be hidden even is “Hide searching category from a table” is enabled.
Show as multiple drop-down or drop-down with a single select.
Category filter position – before or after the attribute filters.
Also, WooCommerce Product Table plugin will display the hierarchy of categories in the dropdown list.
- Price filter works only with enabled price column.
Show as multiple drop-down or drop-down with a single select.
Set range – for manually settings press the “Setup” button and customize your price range settings. You may increase or decrease the number of steps and set different values for each step. Also, you can set the minimum and maximum price.
Here you can choose a visual style of the table.
- Set the fixed table width in PX or %.
- Select the thumbnail size to display in the interface.
- Manage width to hide columns on the mobile screens and set which columns should be hidden on the Content tab in the column options:
Choose a Responsive Mode for a table. WooCommerce Tables are fully responsive and provide 4 different modes of Responsive design according to your needs: standard, automatic column hiding, horizontal scroll, and disabled responsivity.
- Add borders. Cell – adds a border around all four sides of each cell, Row – adds a border only over and under each row. (i.e. only for the rows), None.
- Row Striping – add an automatic highlight for table odd rows. For example – you use a table, but the table’s rows are difficult to separate visually, especially when there are many columns (or multiple lines to a row) – add row striping to a table, it will display rows background in two similar shades of colour to alternately.
- Use highlighting by Mouse-hover to add row highlighting on mouseover and make browsing of the table more convenient.
- Highlight Sorted Column – check and the currently sorted column will be highlighted.
- Enable/disable table loader icon before the table will be completely loaded.
- Choose a table Loader Icon and colour.
Custom table styling (pro)
Choose your custom table styles below. Any settings you leave blank will default to your theme styles.
Borders external. Set the border colour and width in px:
Borders header. Set the colour and width for a header. These settings apply to a header, footer and “search by columns” field.
Header background. These settings apply to a header, footer and “search by columns” field.
Header Font. Select the font for a header (the same for a footer), font size and colour:
Cell font. Select the font for cells, font size and colour:
Search Bar Colors. Here you are able to set the colour of background, font and border:
Fixed Layout – set all columns of the same width.
Vertical alignment – set the vertical alignment of table cell contents.
Horizontal alignment – set the horizontal alignment of table cell contents.
Pagination Position – set pagination buttons position, left, centre, right.
Important! After you changed the settings of plugin don’t forget to click the “Save” button.
Buy Button Styling
Choose your custom styles for button Add to cart. Any settings you leave blank will default.
Button type – text or icon.
If you select the “text” -you can overwrite the default button name, choose font and font size and colour, text-shadow (order: colour, X, Y, blur)
Or select the icon for the button. The same settings are available for an icon – icon size, colour, text-shadow.
Button size – set width and height values in pixels (in that order).
Background type – select the type of button you prefer from the list:
- simple gradient
- pyramid gradient
Borders – set button Borders in this order: colour, top, right, bottom, left.
Button shadow – set button shadow in this order: colour, X, Y, blur, spread.
Padding – set the padding for button content in this order: top, right, bottom, left.
Language and text
Overwrite Table Text.
Here you can change the settings of service text in your table:
- Multiple add selected to cart button text – set the text that your users will see when you enable a “Multiple add to cart” option.
- Empty table – set the text that your users will see if the table has no data.
- Table info text – the text that users will see in the left bottom corner under your table if pagination is enabled.
- Empty info text – set the text that users will see in the left bottom corner under your table if it is empty (pagination should be enabled).
- Filtered info text – set the text for filtering.
- Length text – the text that users will see in the left top corner above your table if pagination is enabled.
- Search label – rename the label for searching on your own taste.
- Zero records – input the text for users, if no matching data were found during their search
- Filer text – set the text that users will see before the filter dropdown
- Reset text – input the text for Reset icon is you using the filters.
- Stock quantity items text
Here you can add custom CSS for the current Table.
After you change some settings – with responsive data tables plugin, you can immediately see the result – open the “Preview” tab and check the table. Note that the table may have minor changes depending on the style that your theme has.