将WooCommerce变化下拉列表显示为模式框

Question

我正在寻找一种将产品变化下拉列表更改为模式框的方法。

说我的产品有50种颜色（50种颜色变化），但我不想在一个产品页面上全部显示它们。相反，我想显示一个选择按钮，当我单击该按钮时，模式窗口会打开所有可用的颜色。

感谢您的帮助。

对我来说，最好的选择是将代码放入我的functions.php中。

我正在使用WooCommerce Variation Swatches插件来显示产品变化的颜色/图像。

预期结果：

我试图将这段代码添加到functions.php中，以创建触发模式窗口的按钮。结果是它不能用作模式，而是在按钮下方显示模式。 此外，它仅显示颜色属性的术语，而没有选择任何颜色的选项。预先感谢您的任何建议。

add_action( 'woocommerce_before_add_to_cart_form', 'color_modal', 5 );
function color_modal() {
  $product = wc_get_product();
  echo '<button id="myBtn">Vyberte si farbu</button><div class="modal-content">
      <span class="close">&times;</span>' . $product->get_attribute( 'pa_odtien' ) . '</div>';
    ?>
        <script>
        var modal = document.getElementById('myModal');
        var btn = document.getElementById("myBtn");
        var span = document.getElementsByClassName("close")[0];
        btn.onclick = function() {
          modal.style.display = "block";
        }
        span.onclick = function() {
          modal.style.display = "none";
        }
        window.onclick = function(event) {
          if (event.target == modal) {
            modal.style.display = "none";
          }
        }
        </script>
    <?php
    }