该网站当前的 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 https://www.wpstud.io/wp-content/uploads/2016/05/product-with-thumbs.jpg。客户的网站功能齐全，并且在一年中最繁忙的日子里，因此我需要最有效的解决方案，而无需进行任何重大更改。预先非常感谢。
除了之前提供的上述代码之外，我还从中编辑了一些小细节，还通过实现滑块的 javascript 包含了 Flexslider 2，创建<li>foreach 循环内的标签与data-thumb技术（Flexslider 的专长）。 Flexslider 自动记录<div>标签包含所有<li>标签，瞧，完美执行了预期。
为了使其正常工作，这里和那里进行了一些调整，但这是值得的，客户对这次更新非常满意。 :)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
