Question

此网站的当前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。客户的网站可以正常运行，并且在一年中最忙的日子里都在运作，因此我需要最有效的解决方案，而无需进行任何重大更改。提前非常感谢。

Answer 1

尝试转到“自定义”->“ WooCommerce”->“产品目录”，然后在此处更改图片大小

Answer 2

除了先前提供的上述代码外，我还从中编辑了一些小细节，并通过实现滑块的javascript在Flex <li>标签中创建了data-thumb标签，其中包含了{{1} }技术（Flexslider专长）。 Flexslider会自动记录<div>标记，该标记包含所有<li>标记，瞧，这是按预期的完美执行方式。

有些调整使它起作用，但是值得，客户对此更新感到非常满意。：）

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

2 个答案: