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

Question

The current Woocommerce setup of this website is being provided with a main product image and several gallery images as normal. The main product image is being used correctly so that it is shown within a list and once clicked, the product page is opened. However, within this product page, the gallery images that are provided on Woocommerce are being shown as full size images beneath each other on the right side of the screen. Within each product page there is mCustomScrollbar in action so that clients can scroll down the images. I want those to be small images with a lightbox and zoom technique instead of full size images. I have also tested plugins to see whether there are issues with regards to this however none have resulted.

I have created a new local site to test and created a product from scratch to match the original Woocommerce files with these ones since this has gone through a different developer. The following files, which seem to be in direct relation with each product page, are binary equal: product-thumbnails.php, product-image.php, single-product.php, content-product.php and content-single-product.php and therefore no changes were made in these that reflect in each product page. I have also found and optimized the below code put in functions.php however to no avail.

 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>';

     }

  }

I have already put my head around this and found myself in a loop, however the above is what I have come up with, which up until now is not a solution. I want the product to show similar to this: https://www.wpstud.io/wp-content/uploads/2016/05/product-with-thumbs.jpg . The client's website is fully functional and through the busiest days of the year so I require the most efficient solution without making any major changes. Thanks so much in advance.

Answer 1

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

Answer 2

In addition to the above code previously provided, I have edited some small details from it and also included the Flexslider 2 by implementing the slider's javascript, creating <li> tags within the foreach loop attached with the data-thumb technique (a Flexslider speciality). The Flexslider automatically notes the <div> tag holding all <li> tags and voila', perfect execution as intended.

Some tweaks here and there to make it work but worth it, client is super happy with this update. :)