WooCommerce Product Table plugin fully supports variable products. You can display variations as dropdown lists, together with attribute and category filters. It makes the selection of the necessary products incredibly flexible and fast.
The plugin also comes with such options as displaying the thumbnails of the product according to the variation. “Show variation thumbnails” option allows users to swap different images and see different images of a product variation all in different colour and style.
Moreover, you can either display variations as dropdown lists, as separate rows in the table.
To display every variation as a single product, enable “Show variation” and select products one by one.
In order to display Variable products with images according to the attribute, you need to follow this detailed instruction.
Product table with variation dropdowns
| Thumbnail | Name | Summary | Color | Size | Price | Buy |
|---|---|---|---|---|---|---|
 | Gray top | This is the product full description. | Black, Gray | $12 – $13 | $13  | |
 | WooBeWoo hoodie | This is the product short description. | Gray, Green | M, S | $10 – $18 | $10 $18 $18  |
 | WooBeWoo top | This is the product short description. | Blue, Gray | XL, XXL | $15 |
Filter: Reset
#wtbp-table-42_994602_wrapper table {border-collapse: collapse;} #wtbp-table-42_994602_wrapper td {border-top: 2px solid #ffffff;} #wtbp-table-42_994602_wrapper tbody tr:first-child td {border-top: none;} #wtbp-table-42_994602_wrapper tbody tr:last-child td {border-bottom: 2px solid #ffffff;} #wtbp-table-42_994602_wrapper .child table {border-collapse: collapse;} #wtbp-table-42_994602_wrapper th {background-color: #9978db !important;color: #ffffff;} #wtbp-table-42_994602_wrapper tbody tr {background-color: #d8d8d8;} #wtbp-table-42_994602_wrapper tbody td {background-color: inherit;} #wtbp-table-42_994602_wrapper table.stripe tbody tr.even {background-color: #c4c4c4;} #wtbp-table-42_994602_wrapper table.stripe.order-column tbody tr > .sorting_1 {background-color: #c4c4c4;} #wtbp-table-42_994602_wrapper table.hover tbody tr:hover {background-color: #b0b0b0;} #wtbp-table-42_994602_wrapper table.stripe.order-column tbody tr.even > .sorting_1 {background-color: #b0b0b0;} #wtbp-table-42_994602_wrapper table.order-column tbody tr > .sorting_1 {background-color: #c4c4c4;} #wtbp-table-42_994602_wrapper table.hover.order-column tbody tr:hover > .sorting_1 {background-color: #9c9c9c;} #wtbp-table-42_994602 th, #wtbp-table-42_994602 td, #wtbp-table-42_994602.wtbpVarAttributes {vertical-align: middle;} #wtbp-table-42_994602 td {text-align: center;} #wtbp-table-42_994602 .thumbnail img, #wtbp-table-42_994602 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;}
Variations on separate rows
| Thumbnail | Name | Categories | Price | Buy |
|---|---|---|---|---|
| Gray top - Gray | Female, girls, Summer Sale, Top | $13 | |
| Gray top - Black | Female, girls, Summer Sale, Top |
#wtbp-table-47_202369_wrapper table {border-collapse: collapse;} #wtbp-table-47_202369_wrapper td {border-top: 2px solid #ffffff;} #wtbp-table-47_202369_wrapper tbody tr:first-child td {border-top: none;} #wtbp-table-47_202369_wrapper tbody tr:last-child td {border-bottom: 2px solid #ffffff;} #wtbp-table-47_202369_wrapper .child table {border-collapse: collapse;} #wtbp-table-47_202369_wrapper th {background-color: #aa88e2 !important;color: #ffffff;} #wtbp-table-47_202369_wrapper tbody tr {background-color: #d3d3d3;} #wtbp-table-47_202369_wrapper tbody td {background-color: inherit;} #wtbp-table-47_202369_wrapper table.stripe tbody tr.even {background-color: #bfbfbf;} #wtbp-table-47_202369_wrapper table.stripe.order-column tbody tr > .sorting_1 {background-color: #bfbfbf;} #wtbp-table-47_202369_wrapper table.hover tbody tr:hover {background-color: #ababab;} #wtbp-table-47_202369_wrapper table.stripe.order-column tbody tr.even > .sorting_1 {background-color: #ababab;} #wtbp-table-47_202369_wrapper table.order-column tbody tr > .sorting_1 {background-color: #bfbfbf;} #wtbp-table-47_202369_wrapper table.hover.order-column tbody tr:hover > .sorting_1 {background-color: #979797;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;}