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_940474_wrapper table {border-collapse: collapse;} #wtbp-table-42_940474_wrapper td {border-top: 2px solid #ffffff;} #wtbp-table-42_940474_wrapper tbody tr:first-child td {border-top: none;} #wtbp-table-42_940474_wrapper tbody tr:last-child td {border-bottom: 2px solid #ffffff;} #wtbp-table-42_940474_wrapper .child table {border-collapse: collapse;} #wtbp-table-42_940474_wrapper th {background-color: #9978db !important;color: #ffffff;} #wtbp-table-42_940474_wrapper tbody tr {background-color: #d8d8d8;} #wtbp-table-42_940474_wrapper tbody td {background-color: inherit;} #wtbp-table-42_940474_wrapper table.stripe tbody tr.even {background-color: #c4c4c4;} #wtbp-table-42_940474_wrapper table.stripe.order-column tbody tr > .sorting_1 {background-color: #c4c4c4;} #wtbp-table-42_940474_wrapper table.hover tbody tr:hover {background-color: #b0b0b0;} #wtbp-table-42_940474_wrapper table.stripe.order-column tbody tr.even > .sorting_1 {background-color: #b0b0b0;} #wtbp-table-42_940474_wrapper table.order-column tbody tr > .sorting_1 {background-color: #c4c4c4;} #wtbp-table-42_940474_wrapper table.hover.order-column tbody tr:hover > .sorting_1 {background-color: #9c9c9c;} #wtbp-table-42_940474 th, #wtbp-table-42_940474 td, #wtbp-table-42_940474.wtbpVarAttributes {vertical-align: middle;} #wtbp-table-42_940474 td {text-align: center;} #wtbp-table-42_940474 .thumbnail img, #wtbp-table-42_940474 .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_438619_wrapper table {border-collapse: collapse;} #wtbp-table-47_438619_wrapper td {border-top: 2px solid #ffffff;} #wtbp-table-47_438619_wrapper tbody tr:first-child td {border-top: none;} #wtbp-table-47_438619_wrapper tbody tr:last-child td {border-bottom: 2px solid #ffffff;} #wtbp-table-47_438619_wrapper .child table {border-collapse: collapse;} #wtbp-table-47_438619_wrapper th {background-color: #aa88e2 !important;color: #ffffff;} #wtbp-table-47_438619_wrapper tbody tr {background-color: #d3d3d3;} #wtbp-table-47_438619_wrapper tbody td {background-color: inherit;} #wtbp-table-47_438619_wrapper table.stripe tbody tr.even {background-color: #bfbfbf;} #wtbp-table-47_438619_wrapper table.stripe.order-column tbody tr > .sorting_1 {background-color: #bfbfbf;} #wtbp-table-47_438619_wrapper table.hover tbody tr:hover {background-color: #ababab;} #wtbp-table-47_438619_wrapper table.stripe.order-column tbody tr.even > .sorting_1 {background-color: #ababab;} #wtbp-table-47_438619_wrapper table.order-column tbody tr > .sorting_1 {background-color: #bfbfbf;} #wtbp-table-47_438619_wrapper table.hover.order-column tbody tr:hover > .sorting_1 {background-color: #979797;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;}