如何解决WooCommerce-仅选择一个属性时更改产品图像吗?
这与在线服装店有关。我们为商品设置了颜色和尺寸属性,例如,一个商品可能有2种变化;绿色/任意尺寸和黑色/任意尺寸。
每种变化都有对应颜色的产品图片,但此刻除非选择颜色AND大小,否则图片不会切换(我知道这是Woo开箱即用的方式) 。我们希望做到这一点,以便在仅选择一种颜色时切换图像。
这可行吗?如果是这样,我应该看哪个挂钩/过滤器/动作?
解决方法
您阅读了以下内容: https://docs.woocommerce.com/document/variable-product/#add-variation-image 如果您这样做(我认为是),请在这里阅读:https://answers.themler.io/questions/135442/woocommerce-product-variation-image-not-showing 另一个错误:
我已经解决了我没有在产品级别设置图片的问题。
尝试以下方法:https://woocommerce.com/products/variation-swatches-and-photos/#
,我们也遇到了这个问题,我设法用 JavaScript 解决了它。此代码假定您使用的是 Variation Swatches For WooCommerce 和 WooCommerce Additional Variation Images。如果您没有使用这些插件,那么您需要调整第 6 行的 jQuery 选择器以及将图像应用于页面的方法。它也仅适用于第一个产品选项,例如颜色不是尺寸。
var image_to_show = '';
var variations = JSON.parse($(".variations_form").attr("data-product_variations"));
if(variations) {
var first_attr = Object.keys(variations[0].attributes)[0];
// when swatch button is clicked
$("ul[data-attribute_name='"+first_attr+"'] li").click(function() {
var choice = $(this).attr("data-value");
var found = false;
// loop variations JSON
for(const i in variations) {
if(found) continue;
if(variations.hasOwnProperty(i)) {
// if first attribute has the same value as has been selected
if (choice === variations[i].attributes[Object.keys(variations[0].attributes)[0]]) {
// change featured image
image_to_show = variations[i].image_src;
found = true;
}
}
}
});
// after woo additional images has changed the image,change it again
jQuery(".variations_form").on("wc_additional_variation_images_frontend_image_swap_done_callback",function() {
if(image_to_show.length) {
$(".attachment-shop_single").attr("src",image_to_show).removeAttr("srcset");
}
});
}
工作原理:当对第一个选项做出选择时,循环遍历 product_variations JSON 对象并找到具有匹配值的变体。从第一场比赛中获取图像并将其应用于页面上的特色图像。
您需要将图像应用于每个变体才能使其发挥作用。
注意:这不是 OP 的确切解决方案,但为其他想要实现此目标的人提供了方向。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。