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