Woocommerce遇到问题将缩略图加载为主要产品图像

Question

我试图完成以下任务：当用户单击缩略图时，该图像将被加载并替换主要产品图像。我使用默认的WooCommerce模板来显示产品图片（我相信唯一的修改是删除product-image.php中主要产品图片上的链接）。

但是，当用户单击时，大图像无法正确加载。奇怪的是，当你仔细检查源代码时，img src具有正确的图像URL，但不显示图像。不知道为什么会发生这种情况！

下面是一个例子网站：http://www.cchcollection.com.php54-5.ord1-1.websitetestlink.com/product/kenan-jacket

而jQuery的我使用（逻辑是 - 抢缩图的URL，以字符串的正确尺寸更换它的大小，然后更换主图像的src与那个新的URL）。

jQuery(document).on('click','.thumbnails .zoom', function(){ 
    var photo_fullsize = jQuery(this).find('img').attr('src').replace('-76x88','-540x623'); 

    jQuery('.woocommerce-main-image img').attr('src', photo_fullsize); 
    return false; 
}); 

我很高兴提供更多的代码/细节/接受另一个需要较少工程的解决方案。谢谢！

Answer 1

我的问题是由新的WooCommerce版本和我正在运行的一个插件之间的冲突引起的，它使变体图像显示为色板。我更新了插件，现在一切正常。

Answer 2

在控制台 它说GET http://www.cchcollection.com.php54-5.ord1-1.websitetestlink.com/product/false 404（未找到） 跳过返回false部分。

jQuery(document).on('click','.thumbnails .zoom', function(){ 
    var photo_fullsize = jQuery(this).find('img').attr('src').replace('-76x88','-540x623'); 
    jQuery('.woocommerce-main-image img').attr('src', photo_fullsize); 
});