单击自主按钮后使用 jQuery 更改 Woocommerce 产品变体

Question

我在 Woocommerce 的产品页面上有一个弹出窗口，其中包含变体图片和每个变体的单独按钮。我想在用户单击特定按钮后更改变化。

我已尝试将 jQuery 添加到某个选项，但它不会更新变体数据，只会更新选择输入。

当我在使用经典选择更改变体后在 DevTools 中观看表单时，表单本身没有任何变化。

我也尝试过使用 jQuery 更改 Select 值，但它根本不起作用：

jQuery('#choose-berlin').click(function() {

        jQuery('#city').val("Berlin").change();

    });

选择结构：

<select id="city" class="" name="attribute_city" data-attribute_name="attribute_city" data-show_option_none="yes">
<option value="">Choose option</option>
<option value="Berlin" class="attached enabled">Berlin</option>
<option value="London" class="attached enabled">London</option>
</select>

弹出窗口中的一个按钮：

<a href="#" role="button" id="choose-berlin">
    Choose Berlin
</a>

如何正确触发变异变化？

Answer 1

试试这个：

jQuery('#choose-berlin').click(function() {
        jQuery('#city').val("Berlin").trigger('change');
});

这假定您已将城市添加为 .variations_form 表单中的属性。

Woocommerce 中有很多基础功能，其中的变体字段在change 和其他几个自定义事件上具有动作侦听器。如果使用 JS 更改选择字段，则需要确保在选择上触发更改操作。