If you’re looking for an efficient WooCommerce store, you should definitely check out the WooBeWoo WooCommerce Product Table plugin to help you display product variations properly!
The Product Table plugin dynamically displays product options and allows your customers to select their desired product option to add to cart in real time without refreshing the page.
However, this can be done in several ways:
1. Display each variation as a separate product.
| Thumbnail | Name | Categories | Buy |
|---|---|---|---|
 | Gray top - Gray | Female, girls, Summer Sale, Top | |
 | Gray top - Black | Female, girls, Summer Sale, Top | |
#wtbp-table-68_705327_wrapper table {border-collapse: collapse;} #wtbp-table-68_705327_wrapper th {background-color: #666a7a !important;color: #ffffff;text-align: center;} #wtbp-table-68_705327 td {text-align: center;} #wtbp-table-68_705327 .thumbnail img, #wtbp-table-68_705327 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;}
2. Display options in the form of drop-down lists in the “buy” column.
| Thumbnail | Name | Categories | Buy |
|---|---|---|---|
| Gray top | Female, girls, Summer Sale, Top | $14 |
#wtbp-table-67_96888_wrapper table {border-collapse: collapse;} #wtbp-table-67_96888_wrapper th {background-color: #666a7a !important;color: #ffffff;text-align: center;} #wtbp-table-67_96888 td {text-align: center;} #wtbp-table-67_96888 .thumbnail img, #wtbp-table-67_96888 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;}
3. Show a button for each variation.
| Thumbnail | Name | Categories | Buy |
|---|---|---|---|
| Gray top | Female, girls, Summer Sale, Top |
#wtbp-table-66_94181_wrapper table {border-collapse: collapse;} #wtbp-table-66_94181_wrapper th {background-color: #666a7a !important;color: #ffffff;text-align: center;} #wtbp-table-66_94181 td {text-align: center;} #wtbp-table-66_94181 .thumbnail img, #wtbp-table-66_94181 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;}
4. Select options in the pop-up window.
| Thumbnail | Name | Categories | Buy |
|---|---|---|---|
| Gray top | Female, girls, Summer Sale, Top | Gray top This is the product short description. $14 |
#wtbp-table-65_435220_wrapper table {border-collapse: collapse;} #wtbp-table-65_435220_wrapper th {background-color: #666a7a !important;color: #ffffff;text-align: center;} #wtbp-table-65_435220 td {text-align: center;} #wtbp-table-65_435220 .thumbnail img, #wtbp-table-65_435220 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;}
Check out this article to learn more about it.