Woocommerce 无法将缩略图加载为主要产品图片答案

【问题标题】：Woocommerce Having Trouble Loading Thumbnail as Main Product ImageWoocommerce 无法将缩略图加载为主要产品图片
【发布时间】：2016-03-27 23:17:52
【问题描述】：

我正在尝试完成以下任务：当用户单击缩略图时，会加载该图像并替换主产品图像。我使用默认的 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;
});

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

【问题讨论】：

标签： jquery wordpress woocommerce

【解决方案1】：

在控制台中它说 GET http://www.cchcollection.com.php54-5.ord1-1.websitetestlink.com/product/false 404（未找到）跳过 return 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);
});

【讨论】：

感谢您的反馈。我通过删除“return false”尝试了您的代码，但它没有修复缩略图代码。此外，它破坏了您可以在变体样本之间切换并加载正确的变体照片的功能。

【解决方案2】：

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

【讨论】：