How can I style the product table?

WooCommerce Product Table comes with some built-in styling and is designed to look good with most themes. Where possible, it takes elements from your theme such as the fonts.

The plugin settings page (WooCommerce > Settings > Products > Product Tables) includes options to set the following custom styles:

Border color and line widths

Header background color

Cell background color

Header font color and size

Cell font color and size

You can further style the table by adding custom CSS to your theme or child theme. (Never modify the plugin itself, as your changes will be overridden when you update to new versions of the plugin.) For example, you would need to do this in order to change the column colors or target individual rows or cells.

Our developer documentation contains a list of CSS selectors that you might find useful. If you don’t know how to do this yourself, we recommend posting a job on Codeable, where pre-approved WordPress experts will bid for the work. We have partnered with them to provide plugin customizations for our customers.

Warning! We do NOT recommend changing the CSS in the product table plugin because if you do this then your changes will be lost when you update the plugin in future.

CSS selectors

If you would like to style the tables beyond the built-in styling options, you will need to add some additional CSS to your site. A good place to put this is in the Customizer, but you can also add this to a child theme.