Javascript Woocommerce通过JS更改产品变化

下面是一个工作示例，说明了我们的情况：

我正在尝试创建“样例”供用户单击，这将改变woocommerce用于获取变量数据的隐藏选择框的值

是否有特定的方法告诉woocommerce读取选择框的值

一切正常，但更改变体id并准备好添加到购物车的javascript事件从未发生。

注意：我用d-none隐藏了wc_下拉列表，因为我认为它可以最小化自定义解决方案

Variable.php-调用fpusa_产品_属性_按钮（）

---

我所要做的就是简单地触发

上的更改事件，并将所选选项传递给

$('#var_btn button').click(function(){
    let attribute = $(this).attr('data-key');
    let option = $(this).attr('data-value');
    console.log( attribute, option );
    $('#' + attribute).val( option ).change();
  });

function fpusa_product_attribute_button( $options, $attribute_name, $product ){
    if( ! empty( $options ) ) : ?>
        <div id="var_btn" class="d-flex">
            <?php foreach( $options as $option ): ?>
                <button type="button" class="d-flex btn justify-content-center align-items-center border mx-1" data-key="<?php echo $attribute_name ?>" data-value="<? echo $option ?>">
                    <?php echo $option; ?>
                </button>
            <?php endforeach; ?>
        </div> <?php
    endif;
}

$('#var_btn button').click(function(){
    let attribute = $(this).attr('data-key');
    let option = $(this).attr('data-value');
    console.log( attribute, option );
    $('#' + attribute).val( option ).change();
  });