Product Table Settings

In order to customize the table functionality and design, open the “Settings” tab which includes: 

Main settings

Features

Appearance

Language and text

Main Tab

Table elements

table elements product table

Caption. Check if you want to show the name of the table above the table.

Product Table Caption

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.
Footer

Fixed Header allows to fix the table’s header during table scrolling.

Important! Header option must be enabled for using this feature.

Date Formats

date formats product tables

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


Features

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.

product order

The order will be saved in the way you set it and will display in a table.

Pagination. Show table pagination.

Enable Pagination menu if you’d like to show the drop-down list to select the number of products on the page for display.

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.

If Pagination menu is disabled, set the number of products to display on one Pagination page in Products per Page option.

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 feature

Also, you can save your table as PDF file by choosing to save as pdf at the new window in destination settings.

Save as pdf

Print captions. If enabled, you can print the table caption, description and signature.

Hide thee out of stock items helps you to hide all of the products that ended.

Hide out of stock items feature

Show private products feature needs to display products on the front-end.

Show private products feature

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 all to 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. Works only with enabled attribute columns.

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.

Custom taxonomy filter

Category filter. Enable category filter and filtering by categories of product. Required to include category as a column in a table.

Category filter position – before or after the attribute filters.

Also, WooCommerce Product Table plugin will display the hierarchy of categories in the dropdown list.

Category filter hierarchy


Appearance

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.

Size thumbnail example

  • 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.

borders product table

  • 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.

Row Striping

  • 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.


Borders rows   


Borders columns


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 background     


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

CSS editor

Here you can add custom CSS for the current Table.

Preview

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.

Categories
Latest Articles