Elementor z怎么去适配编辑 WooCommerce 产品页面

使用 Elementor 自定义 WooCommerce 产品页面，并遇到了以下挑战：

1. 创建产品：在 WooCommerce 中已创建产品。
2. 安装“额外产品选项”插件：添加了颜色样本功能，并根据所选颜色动态更改产品图像。

希望获得以下指导：

1. 将 WooCommerce 产品页面转换为可编辑的 Elementor 页面。
2. 确保在使用 Elementor 定制后，WooCommerce 产品页面及其额外功能保持正常运行。

这个逻辑怎么去做?