Question

这与在线服装店有关。我们为商品设置了颜色和尺寸属性，例如，一个商品可能有2种变化；绿色/任意尺寸和黑色/任意尺寸。

每种变化都有对应颜色的产品图片，但此刻除非选择颜色AND大小，否则图片不会切换（我知道这是Woo开箱即用的方式）。我们希望做到这一点，以便在仅选择一种颜色时切换图像。

这可行吗？如果是这样，我应该看哪个挂钩/过滤器/动作？

Answer 1

您阅读了以下内容： 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/#

Answer 2

我们也遇到了这个问题，我设法用 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 的确切解决方案，但为其他想要实现此目标的人提供了方向。

WooCommerce-仅选择一个属性时更改产品图像吗？

2 个答案: