Creating custom product thumbnail and gallery image in Woocommerce single product page

Question

I am new to developing woocommerce templates. I am working on converting an static html template to woocommerce. I want to create a custom product thumbnail and image gallery like the image below:

I retrieved the product gallery images but I can't get the product feature image and change the big image after clicking on small gallery images.

Can you help me completing the code in 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>

I think some javascript need to change the main image after clicking on small images but I don't have enough experience in coding and I would really appreciate any help.

Thanks.