这是一项相当艰巨的任务，很难彻底回答，但这应该会帮助你前进。

我肯定会坚持使用变体，因为从网站结构和管理的角度来看，它是有意义的。

默认情况下，WooCommerce将显示与所选选项相关的信息，即图像、尺寸、描述等。这意味着当您从下拉列表中选择FAST 1X时，它将显示与该选项相关的所有信息。如果这不起作用，您需要调查原因，但这将取决于您的自定义主题

不过，您很可能需要调整一些WooCommerce模板以适应您的布局。重写是最好的方法，因为当插件更新时，您不会丢失任何自定义更改，最好的资源是：https://docs.woocommerce.com/document/template-structure/ （对于未来的读者：如果链接不存在，请搜索“WooCommerce模板覆盖”）。

要覆盖WooCommerce模板，请从wp-content/plugins/woocommerce/templates/path/to/template/file.php 到wp-content/themes/yourtheme/woocommerce/path/to/template/file.php. 只要文件路径匹配，WooCommerce就会加载覆盖。

这个.content-single-product.php 模板是更改页面布局的一个很好的起点，并允许您查看正在调用的挂钩。这将允许您删除其中任何一个，并添加您自己的来调整页面的布局。

要添加和删除挂钩，您需要将以下内容添加到主题的functions.php 文件：

function woocommerce_actions() {
    // Remove excerpt from product view
    remove_action( \'woocommerce_single_product_summary\', \'woocommerce_template_single_excerpt\', 20 );

    // Optionally add it elsewhere
    add_action( \'woocommerce_before_shop_loop\', \'woocommerce_template_single_excerpt\', 20 );

    // or hook your own function
    add_action( \'woocommerce_single_product_summary\', \'custom_template_single_excerpt\', 20 );
}
add_action( \'wp_head\', \'woocommerce_actions\' );

function customer_template_single_excerpt() {
    return _e( "My custom excerpt", "custom-theme" );
}