CSS selectors
These selectors are for the current table frontend. If your site is still in legacy mode, the table uses the older DataTables markup and these class names do not apply.
The table
.wpt-dataview
The wrapper <div> around the entire table and its controls.
.wpt-dataview .barn2-dataview
The view inside the wrapper, which holds the controls, the table and the footer.
.wpt-dataview .data-table
The table itself.
Rows and cells
.wpt-dataview .table-header-row
The row of column headings.
.wpt-dataview .table-header-cell
A single column heading. A heading the customer can sort also carries .sortable, and every heading carries its column class, such as .col-name or .col-price.
.wpt-dataview .table-header-label
The text inside a column heading.
.wpt-dataview .header-menu-trigger
The button in a column heading that opens the sort and filter menu.
.wpt-dataview .table-row
A content row. Each row also carries .odd or .even, plus the usual WooCommerce classes such as .product-123, .instock and .product-type-simple.
.wpt-dataview .table-row.odd
.wpt-dataview .table-row.even
Odd and even numbered rows.
.wpt-dataview .table-cell
A single cell. Every cell carries its column class as well, such as .col-image or .col-buy.
.wpt-dataview .cell-content
The content inside a cell.
Responsive rows
.wpt-dataview .table-row.responsive-parent
A row that has extra data hidden in a child row.
.wpt-dataview .responsive-control
.wpt-dataview .responsive-control-icon
The control that opens and closes the child row, and the icon inside it.
Controls above the table
.wpt-dataview .layout-header
The area above the table that holds the search box and the filters.
.wpt-dataview .search-input-wrapper
.wpt-dataview input.search-input
The search box and its input field.
.wpt-dataview .header-filters
The filters above the table.
.wpt-dataview .select-filter-wrapper
.wpt-dataview .multiselect-trigger
A single filter and the control that opens it. A filter accepting several values also carries .multiselect.
.wpt-dataview .dv-action-button
The 'Add Selected to Cart' button.
Controls below the table
.wpt-dataview .footer-controls
The area below the table.
.wpt-dataview .pagination-left
.wpt-dataview .pagination-center
.wpt-dataview .pagination-right
The three pagination areas below the table.
.wpt-dataview .document-count
.wpt-dataview .document-count-text
The product totals message, such as "Showing 1-10 of 28".
Legacy mode selectors
The selectors below apply to sites still running in legacy mode.
.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