如何触发WooCommerce产品循环中动态加载产品的变体切换？

页面初始加载的可变产品能正常触发变体切换，是因为WooCommerce在页面加载完成后自动初始化了所有.variations_form元素的变体功能，但AJAX动态添加的元素不在初始DOM里，所以得手动重新初始化：

• 在AJAX请求完成、新产品插入DOM后，执行以下代码：

// 遍历所有未初始化的可变产品表单，避免重复处理
jQuery('.variations_form').not('.initialized').each(function() {
  jQuery(this).wc_variation_form().addClass('initialized');
});

• 如果初始化后变体价格、库存信息没自动更新，再触发一次变体选择变更事件：

jQuery('.variations_form').trigger('woocommerce_variation_select_change');

核心就是给AJAX新增的变体表单手动调用WooCommerce内置的wc_variation_form()初始化方法，把变体切换的绑定逻辑重新应用到新元素上。

内容的提问来源于stack exchange，提问作者YGOSuperpro