1. Knowledge Base
  2. WooCommerce Product Table
  3. Advanced Usage

How to add alternating background colors to the table rows

Our WooCommerce Product Table and Posts Table Pro plugins add even and odd CSS classes to each row in the table, but doesn’t style them. The actual styling is inherited from your theme, which helps to ensure that your tables match the rest of your website.

Some themes (e.g. Storefront, which we use on our demos) do style tables with alternating background colors, but your theme may not. If you wish to style these, then you would need to add some extra CSS to your site.

We have provided some CSS which you can add to the Customizer under Appearance → Customize. This will add alternating background colors to the rows in your table. You should replace the hexadecimal color codes below with the colors that you wish to use for your alternating background colors:

CSS for WooCommerce Product Table

.wc-product-table tr.odd td {
background-color: #f9f9f9; 
}
.wc-product-table tr.even td {
background-colour: #fff;
}

CSS for Posts Table Pro

.posts-data-table tr.odd td {
background-color: #f9f9f9; 
}
.posts-data-table tr.even td {
background-colour: #fff;
}

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

Related Articles