In order to customize the table functionality and design, open the “Settings” tab which includes:
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 to fix the table’s header during table scrolling.
Important! Header option must be enabled for using this feature.
Date. Ыet 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.
Searching. Enter your keywords and perform an instant search and sort.
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.
Print captions. If enabled, you can print the table caption, description and signature.
Multiple add to cart (pro) 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.
Attribute filter – enable attribute filter and select attributes to filtering. Works only with enabled attribute columns
Category filter. Enable category filter and filtering by categories of product. Works only with enabled category columns.
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:
You can set the Summary column width also, to make it wider if you have a lot of content in the product description.
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 mouse over and make bouse 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.
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 drop down
- 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.