Product Table appearance settings

With a WooCommerce Product Table, you can make a table more attractive and informative. We propose all necessary options to set the appearance of the table in the best way.

You have an ability to set the following Table elements in the Main tab:

  • Caption – the name of the table above the table.
  • Description – description of the table between title and table.
  • Signature – signature under table footer.
  • Header – the table head.
  • Footer – the table footer.

Here you can see their appearance and position in the Product table:


WooCommerce Product Table comes with various features and their elements can be displayed above or below the table.  Move to the Settings/ Features and make it easier for customers to search, sort and filter the table.

These Product Table Features are:

Table information – pagination information under the table.

Searching – an instant search by entered keywords.

Sorting – dynamic sorting with arrows.

Pagination – a subdivision of the table by the pages.

Print – print the product data straight away from the table

Multiple add to cart –  select a number of products and add to cart in one go.

Attribute and category filters –  filtering by categories and attribute of a product.

Thumbnail size settings – settings for image size to display in the interface.

 

Features product table


Also, you can  set some additional settings of the visual style in the Appearance Tab: 

Fixed Table Width. Set a fixed table width in PX or %.

Summary column width. Set width to a summary column or leave it empty to default.

Mobile screen width.  Select screen width to hide columns. Which columns should be hidden on small screens, you can set on the Content tab in the column options.
Hide on small screens
Borders.  Cell – adds a border around all four sides of each cell, Row – adds border only over and under each row. (i.e. only for the rows), Non.

borders product table

Row Striping – add row striping to a table, it will display rows background in two similar shades of colour to alternately.

Row Striping

Highlighting by Mouse-hover – add row highlighting on mouse over.

Highlight the Order Column. If checked – the currently sorted column will be highlighted.

Hide Table Loader. Enable/disable table loader icon before the table will be completely loaded.

Border colour. Choose any colour for the loader.

Table Loader Icon. Choose the icon type for the loader.

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.


Categories
Latest Articles