Woocommerce - Single Product Carousel

functions.php

// Modify single product images: add carousel functionality
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_before_single_product_summary', function(){

	global $product;
			
	$image_ids = [];

	// featured image
	if( has_post_thumbnail() ) $image_ids[] = get_post_thumbnail_id();

	// product gallery
	$attachment_ids = $product->get_gallery_image_ids();
	if( $attachment_ids ) $image_ids = array_merge($image_ids, $attachment_ids);
	
	if( !$image_ids ) return;
	
	echo '<div class="single-product-images">';
		echo '<div class="single-product-images-wrapper">';
			echo '<div class="product-images-carousel">';
				foreach( $image_ids as $image_id ) {
					echo '<div class="item">';
						echo '<a href="'. wp_get_attachment_image_url( $image_id, 'full' ) .'" data-elementor-lightbox-slideshow="product-gallery" class="image-zoom">';
							echo wp_get_attachment_image ( $image_id, 'product_overview_carousel' ); // 554 x 554
						echo '</a>';
					echo '</div>';
				}
			echo '</div>';
			echo '<div class="product-images-carousel-thumb">';
				foreach( $image_ids as $image_id ) {
					echo '<div class="item">';
						echo wp_get_attachment_image ( $image_id, 'thumbnail' ); // 165 x 165
					echo '</div>';
				}
			echo '</div>';
		echo '</div>';
	echo '</div>';
}, 20 );

scripts.js

// Custom product gallery carousel
if( $('.product-images-carousel').length ) {
    $('.product-images-carousel').slick({
        autoplay: false,
        speed: 500,
        arrows: true,
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        asNavFor: '.product-images-carousel-thumb',
    });

    if( $('.product-images-carousel-thumb').length ) {
        $('.product-images-carousel-thumb').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.product-images-carousel',
            arrows: false,
            dots: false,
            centerMode: true,
            focusOnSelect: true
        });
    }
}

styles.css

/* Custom Product Gallery Carousel */
.single-product-images {
	float: left;
	width: 50%;
	max-width: 50%;
	padding: 10px;
}
.single-product-images-wrapper {
	max-width: 554px;
}
.product-images-carousel {
	max-height: 554px;
	overflow: hidden;
}
.product-images-carousel-thumb {
	max-height: 152px;
	overflow: hidden;
	margin-bottom: 0;
}
.product-images-carousel-thumb .item {
	padding: 0 10px;
	cursor: pointer;
	display: inline-block;
}
.product-images-carousel-thumb .slick-slide {
	opacity: .5;
}
.product-images-carousel-thumb .slick-slide.slick-center {
	opacity: 1;
}
.product-images-carousel .image-zoom {
	position: relative;
	display: inline-block;
}
.product-images-carousel .image-zoom:before {
	content: '\f00e';
	font-family: 'FontAwesome';
	display: inline-block;
	font-size: 18px;
	position: absolute;
	top: 10px;
	left: 10px;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	width: 36px;
	height: 36px;
	text-align: center;
	line-height: 36px;
	opacity: 0;
	transition: all .4s ease;
}
.product-images-carousel .image-zoom:hover:before {
	opacity: 1;
}
.product-images-carousel.slick-initialized,
.product-images-carousel-thumb.slick-initialized {
	max-height: initial;
	overflow: visible;
}