1. WooCommerce Product Table
  2. Developer Documentation

CSS selectors

.wc-product-table-wrapper
The wrapper <div> around the entire table and its controls.

​.wc-product-table
The product table's <table> element.

.wc-product-table thead 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 td​.col-<column>
The data cells for a particular column. The class name is always col- followed by the column name, e.g. col-name, col-price, col-buy, etc.

​.wc-product-table tbody tr.child
The responsive child row displayed after clicking the + icon. This contains one <td> for each piece of data in the child row.

​.wc-product-table tbody tr.child ul.dtr-details
The list of data items inside the responsive child row.

.wc-product-table tbody tr.child .dtr-title
A column heading inside the responsive child row.

.wc-product-table tbody tr.child .dtr-data
A column data inside the responsive child row.

.wc-product-table.dtr-inline > tbody > tr > td.dtr-control::before
.wc-product-table.dtr-column > tbody > tr > td.control::before
The green + icon shown at the beginning of the row when "responsive data" is available but currently hidden. The icon is added to the ::before pseudo-element, so to override or remove the icon you would need to set the content property.

.wc-product-table.dtr-inline > tbody > tr.parent > td.dtr-control::before
.wc-product-table.dtr-column > tbody > tr.parent > td.control::before
The red - icon shown at the beginning of the row when "responsive data" is available and is displayed. The icon is added to the ::before pseudo-element, so to override or remove the icon you would need to set the content property.

​.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 .wc-product-table-multi-form
​.wc-product-table-controls .wc-product-table-multi-form input[type="submit"]
The 'Add Selected To Cart' button

​.wc-product-table-controls .multi-cart-message
The success or error message after adding multiple products to the cart.

​.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

Was this article helpful?

Related Articles

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