在 Woocommerce 单个产品页面中创建自定义产品缩略图和图库图像

Question

我是开发 woocommerce 模板的新手。 我正在将静态 html 模板转换为 woocommerce。 我想创建一个自定义产品缩略图和图片库，如下图所示：

我检索了产品图库图像，但在单击小图库图像后无法获取产品特征图像和更改大图像。

你能帮我完成product-image.php 中的代码吗：

 <?php global $product; $gallery_ids = $product->get_gallery_image_ids(); ?> <div class="product-image"> <!-- Main Image --> <div class="product_img_box"> <img id="product_img" src='assets/images/product_zoom_img1.jpg'> <a href="#" class="product_img_zoom" title="Zoom"> <span class="linearicons-zoom-in"></span> </a> </div> <!-- Gallery Images --> <div id="pr_item_gallery" class="product_gallery_item slick_slider" data-slides-to-show="4" data-slides-to-scroll="1" data-infinite="false"> <?php foreach ($gallery_ids as $gallery_id) : $img_src = wp_get_attachment_url($gallery_id); ?> <div class="item"> <a href="#" class="product_gallery_item" data-zoom-image="<?php echo $img_src;?>"> <img src="<?php echo $img_src; ?>"> </a> </div> <?php endforeach; ?> </div> </div>

我认为一些 javascript 需要在单击小图像后更改主图像，但我在编码方面没有足够的经验，我真的很感激任何帮助。

谢谢。