1. Home
  2. Documentation
  3. WooCommerce Product Table
  4. Advanced Usage
  5. How can I style the product table?

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.

WooCommerce Product Table Styling OptionsThe 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.) 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. Alternatively, or you can use our styling and customizations service – please contact us for a free quote.

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.


Was this article helpful?

Related Articles