Woocommerce 产品库图像显示为全尺寸图像而不是缩略图答案

【问题标题】：Woocommerce product gallery images are showing as full size images instead of thumbnailWoocommerce 产品库图像显示为全尺寸图像而不是缩略图
【发布时间】：2019-07-07 10:57:24
【问题描述】：

本网站的当前 Woocommerce 设置正常提供主要产品图片和几个图库图片。主产品图像使用正确，因此它显示在列表中，一旦单击，产品页面就会打开。但是，在此产品页面中，Woocommerce 上提供的图库图像在屏幕右侧显示为彼此下方的全尺寸图像。在每个产品页面中都有 mCustomScrollbar 在运行，以便客户可以向下滚动图像。我希望那些是带有灯箱和缩放技术的小图像，而不是全尺寸图像。我还测试了插件，看看是否有这方面的问题，但没有任何结果。

我创建了一个新的本地站点进行测试，并从头开始创建一个产品来匹配原始的 Woocommerce 文件和这些文件，因为这是通过不同的开发人员完成的。以下文件似乎与每个产品页面直接相关，它们是二进制相等的：product-thumbnails.php、product-image.php、single-product.php、content-product.php 和 content-single-product。 php，因此在每个产品页面中都没有进行任何更改。我还发现并优化了下面的代码放在functions.php中但是无济于事。

 add_action('woocommerce_shop_loop_item_title','wps_add_extra_product_thumbs', 5);
 function wps_add_extra_product_thumbs() {

     if (is_product()) {

         global $product;

         $attachment_ids = $product->get_gallery_image_ids();

         echo '<div class="product-thumbs">';

         foreach( array_slice( $attachment_ids, 0,3 ) as $attachment_id ) {

               $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];

               echo '<img class="thumb" src="' . $thumbnail_url . '">';

         }

         echo '</div>';

     }

  }

我已经对此有所了解，发现自己陷入了循环，但是以上是我想出的，到目前为止，这还不是解决方案。我希望产品显示类似于：https://www.wpstud.io/wp-content/uploads/2016/05/product-with-thumbs.jpg。客户的网站功能齐全，并且在一年中最繁忙的日子里，我需要最有效的解决方案，而无需进行任何重大更改。提前非常感谢。

【问题讨论】：

标签： php css wordpress woocommerce

【解决方案1】：

除了之前提供的上述代码之外，我还编辑了其中的一些小细节，还通过实现滑块的 javascript 包含了 Flexslider 2，在带有 data-thumb 技术的 foreach 循环中创建 <li> 标签（a Flexslider 专长）。 Flexslider 会自动记录 <div> 标签，其中包含所有 <li> 标签和瞧，按预期完美执行。

在这里和那里进行了一些调整以使其正常工作，但值得，客户对此更新非常满意。 :)

【讨论】：

【解决方案2】：

尝试去自定义 -> WooCommerce -> 产品目录并在那里更改图像大小

【讨论】：

您提到的方法从列出所有产品的页面更改产品图像的大小，但它对每个独立的产品页面没有影响。某个产品页面中的图像仍然是全尺寸的。感谢您的帮助。