将 WooCommerce 产品变体显示为列表而不是下拉列表

Question

我正在尝试更改产品变体在我的单一产品页面上的显示方式。 我最终想要一个显示每个产品变体的变体图像、变体标题和价格的列表。 下图为例。

我想我了解 go 的方式，并且已经开始，但是不太清楚如何获取我需要的数据。 我需要：

1. 获取变异数据并将其存储在数组中
2. 在表格中显示该信息

global $product;

                if ( !$product->is_type( 'variable' ) ) return;

                    $variations = $product->get_available_variations();

                     echo '<div class="variation-prices"><table>';
                        foreach($variations as $variation){
                         $attributes = wc_get_formatted_variation($variation['attributes'],true, false);
                     echo '<tr><td>' . $attributes . '</td><td>' . wc_price($variation['display_price']) . '</td></tr>';
                        }
                    echo '</table></div>';

我已经设法将变体名称和价格拉到一个表中，但我缺乏功能。

非常感谢。