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 | Color | Buy |
|---|---|---|---|
 | Gray top - Gray | Gray | |
 | Gray top - Black | Black | |
#wtbp-table-68_834069_wrapper table {border-collapse: collapse;} #wtbp-table-68_834069_wrapper th {background-color: #f7fbff !important;color: #0f0f0f;text-align: center;} #wtbp-table-68_834069 td {text-align: center;} #wtbp-table-68_834069 .thumbnail img, #wtbp-table-68_834069 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;} #wtbp-table-68_834069 .wtbpAddToCartWrapper .button {overflow: hidden !important;color: #ffffff !important;border-radius: 5px !important;background: #007bff !important;} #wtbp-table-68_834069 .wtbpAddToCartWrapper .button:hover {color: #007bff !important;border-top: 1px solid #007bff !important;border-right: 1px solid #007bff !important;border-bottom: 1px solid #007bff !important;border-left: 1px solid #007bff !important;background: #ffffff !important;}
2. Display options in the form of drop-down lists in the “buy” column.
| Thumbnail | Name | Color | Buy |
|---|---|---|---|
| Gray top | Black, Gray | Add to Cart This product has multiple variants. The options may be chosen on the product page Original price was: $13.40.$12.00Current price is: $12.00. $13.50 |
#wtbp-table-70_142381_wrapper table {border-collapse: collapse;} #wtbp-table-70_142381_wrapper th {background-color: #f7fbff !important;color: #0f0f0f;text-align: center;} #wtbp-table-70_142381 td {text-align: center;} #wtbp-table-70_142381 .thumbnail img, #wtbp-table-70_142381 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;} #wtbp-table-70_142381 .wtbpAddToCartWrapper .button {overflow: hidden !important;color: #ffffff !important;border-radius: 5px !important;background: #007bff !important;} #wtbp-table-70_142381 .wtbpAddToCartWrapper .button:hover {color: #007bff !important;border-top: 1px solid #007bff !important;border-right: 1px solid #007bff !important;border-bottom: 1px solid #007bff !important;border-left: 1px solid #007bff !important;background: #ffffff !important;}
3. Show a button for each variation.
| Thumbnail | Name | Color | Buy |
|---|---|---|---|
| Gray top | Black, Gray |
#wtbp-table-71_924663_wrapper table {border-collapse: collapse;} #wtbp-table-71_924663_wrapper th {background-color: #f7fbff !important;color: #0f0f0f;text-align: center;} #wtbp-table-71_924663 td {text-align: center;} #wtbp-table-71_924663 .thumbnail img, #wtbp-table-71_924663 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;} #wtbp-table-71_924663 .wtbpAddToCartWrapper .button {overflow: hidden !important;color: #ffffff !important;border-radius: 5px !important;background: #007bff !important;} #wtbp-table-71_924663 .wtbpAddToCartWrapper .button:hover {color: #007bff !important;border-top: 1px solid #007bff !important;border-right: 1px solid #007bff !important;border-bottom: 1px solid #007bff !important;border-left: 1px solid #007bff !important;background: #ffffff !important;}
4. Select options in the pop-up window.
| Thumbnail | Name | Color | Buy |
|---|---|---|---|
| Gray top | Black, Gray | Gray top This is the product short description. Select Variation This product has multiple variants. The options may be chosen on the product page Original price was: $13.40.$12.00Current price is: $12.00. $13.50 |
#wtbp-table-72_140308_wrapper table {border-collapse: collapse;} #wtbp-table-72_140308_wrapper th {background-color: #f7fbff !important;color: #0f0f0f;text-align: center;} #wtbp-table-72_140308 td {text-align: center;} #wtbp-table-72_140308 .thumbnail img, #wtbp-table-72_140308 .wtbpAddToCartWrapper {margin-left: auto;margin-right: auto;} .wtbpModalContent {width: 80%;} .wtbpModalContent.wtbpModalContentForVariations {max-width: 600px;} #wtbp-table-72_140308 .wtbpAddToCartWrapper .button {overflow: hidden !important;color: #ffffff !important;border-radius: 5px !important;background: #007bff !important;} #wtbp-table-72_140308 .wtbpAddToCartWrapper .button:hover {color: #007bff !important;border-top: 1px solid #007bff !important;border-right: 1px solid #007bff !important;border-bottom: 1px solid #007bff !important;border-left: 1px solid #007bff !important;background: #ffffff !important;}
Check out this article to learn more about it.