如何在woocommerce中定义当前产品缩略图？

I am currently working on a shop page which works with Wordpress + Woocommerce Plugin. I edited the woocommerce Files so that I have custom products, menus and so on.

I managed to get current images from my products, but now I want them to appear on click (the little image Icon, on the Screenshot)

But instead of showing the current product image it shows the first image of each category

.

Here is my current code that loads the wrong product thumbnail:

 <div class="modal-content">
   <a itemprop="image" href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id() ); ?>">
   <?php echo get_the_post_thumbnail(  $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) ?>
</a></div>

It is located in woocommerce/content-product.php.

Thank you in advance

Nico

So this is the solution, I had to create dynamic IDs. As I wrote it was always the same image, the reason of this was that there was only one ID and not multiple/dynamic.

This was the code I had to add to the id:

<div id="modal-<?php echo $product->id ?>" class="modal">

And here is the other one:

<a data-target="modal-<?php echo $product->id; ?>" class="modal-trigger"><i class="material-icons red-text right">photo</i></a>