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, body font size, 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.
Please refer to the list of CSS selectors for the plugin.
Alternating row background colors
If you'd like to change the alternating row background colors, or if your theme isn't adding a different background to each alternate row of the table, then please see our separate article about this.