1. Knowledge Base
  2. WooCommerce Product Table
  3. Developer Documentation

CSS selectors

The main product <table> element
.wc-product-table th
The table headings
.wc-product-table thead tr
.wc-product-table tfoot tr
The table header and footer rows
​.wc-product-table tbody tr
The table content rows
​.wc-product-table tbody td
The table cells
​.wc-product-table tbody tr.even td
A cell within an “even” numbered row, e.g. 2nd, 4th, , 6th, etc
​.wc-product-table tbody tr.odd td
A cell within an “odd” numbered row, e.g. 1st, 3rd, 5th, etc
​.wc-product-table tbody tr.child
The responsive child rows (shown when clicking the + icon)
​.wc-product-table tbody tr.child .dtr-details
The responsive child data (shown when clicking the + icon)
​.wc-product-table td​.col-name​
To target a particular column. The class name is always col- followed by the column name, e.g. col-name, col-price, col-add-to-cart, etc.
​.wc-product-table-controls .wc-product-table-select-filters
​.wc-product-table-controls .wc-product-table-select-filters label
​.wc-product-table-controls .wc-product-table-select-filters select
The filter dropdowns above the table
​.wc-product-table-controls .dataTables_length
​.wc-product-table-controls .dataTables_length select
The ‘Show … products’ dropdown above the table
.wc-product-table-controls .dataTables_filter
.wc-product-table-controls .dataTables_filter input[type="search"]
The search box shown above the table
​.wc-product-table-controls .dataTables_paginate
​.wc-product-table-controls .dataTables_paginate .paginate_button
The pagination buttons below the table
​.wc-product-table-controls .dataTables_info
The product totals message (e.g. Showing 1 of 5 products)
​.wc-product-table .wc-product-table-reset
​.wc-product-table .wc-product-table-reset a
The reset link above the table.
​.wc-product-table-controls .multi-cart-form
​.wc-product-table-controls .multi-cart-form input[type="submit"]
The ‘Add Selected To Cart’ button
​.wc-product-table .add-to-cart-wrapper
​.wc-product-table .add-to-cart-wrapper form.cart
The Add To Cart form for a product in the table
Still need help?
If searching the knowledge base hasn't answered your question, please contact support.

Related Articles