Table design

Using WooCommerce Product Table you have all the necessary options in one plugin.

You can create responsive product tables of the selected items automatically without any special skills.

All the settings you can find in the Appearance Tab. 

  • Here you can 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.

Also, other design settings are available:
  • 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 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.

You have all the necessary options to make a table unique and match your theme on the website with Custom table styling feature (pro).

Look closer:

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.

Full tutorial how to customize and set the Product Table you can find in Main Settings tutorial.

Also, you can look at the examples of tables, which has been built using the WooCommerce Product Table by Woobewoo.