Wordpress: Separating featured image from products gallery - php

Question

I'm trying to separate the Featured Image from the Products Variation Gallery.
I was able to split the Featured Image, thanks to a custom shortcode placed in function.php, and I even managed to do an on-click action - Lightbox as well as a custom size option.
However, for the past few days I've been having trouble setting up the same feature but for the variation products gallery.
The code that I used to output the featured photo is this:
global $product;
$title = $product->get_name();
$image_id = $product->get_image_id();
$image_url = wp_get_attachment_url( $image_id );
$image_src = wp_get_attachment_image_src( $image_id, array( 740, 360 ) );
echo '<center><a href="' . $image_url . '" data-lightbox="variation-product" data-title="' . $product->get_name() . '">';
echo '<img src="' . $image_src[0] . '" width="' . $image_src[1] . '" height="' . $image_src[2] . '" alt="' . $product->get_name() . '">';
echo '</a></center>';
And this one is for the variation products gallery:
global $product;
$attachment_ids = $product->get_gallery_image_ids();
foreach ( $attachment_ids as $attachment_id ) {
$image_url = wp_get_attachment_url( $attachment_id );
$image_src = wp_get_attachment_image_src( $attachment_id, array( 740, 360 ) );
echo '<center><a href="' . $image_url . '" data-lightbox="variation-product" data-title="' . $product->get_name() . '">';
echo '<img src="' . $image_src[0] . '" width="' . $image_src[1] . '" height="' . $image_src[2] . '" alt="' . $product->get_name() . '">';
echo '</a></center>';
}
And this is how it looks. This is the main problem. I tried to limit the picutres like this:
$i = 0;
foreach ( $attachment_ids as $attachment_id ) {
if ($i == 1) break;
/* the rest of the code */
$i++;
}
and this is the final result. You wonder where the problem is? Well... There is.
This variant of the code completely removes all variation images. The result I am trying to achieve is:
When we have more than one variable image, only the first one is shown on the product page. When the first variation photo is opened in the Lightbox, all other photos should be visible.
How can I do that? The theme that I'm using is Woodmart, by XTemos.