Responsive WooCommerce product gallery

product.php

/**
 * Product Images
 *
 * @return	void
 */
function projectnamespace_product_images() {

	global $post, $product;

	echo '<div class="images clear">';

	if ( has_post_thumbnail() ) {

		$attachment_ids = $product->get_gallery_attachment_ids();

		if ( ! empty( $product->children ) && is_array( $product->children ) ) {
			foreach ( $product->children as $child ) {
				$variation = new WC_Product_Variation( $child );
				$attributes = explode(' &ndash; ', $variation->get_formatted_name() );
				$attachment_ids[ $attributes[ 2 ] ] = $variation->get_image_id();
			}
		} else {
			$attachment_ids = $product->get_gallery_attachment_ids();
		}

		if ( ! $attachment_ids ) {

			echo '<div class="product-images product-image-single">';

				$thumbnail_id = get_post_thumbnail_id();
				$image_title = esc_attr( get_the_title( $thumbnail_id ) );

				$image_src = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
				$image_full = wp_get_attachment_image_src( $thumbnail_id, 'large' );

				echo sprintf( '<div class="product-image" style="background-image: url( %s );"><a href="%s" itemprop="image" class="woocommerce-main-image" title="%s"></a></div>', $image_src[ 0 ], $image_full[ 0 ], $image_title );

			echo '</div>';

		} else {

			if ( count( $attachment_ids ) > 1 ) {
				
				echo '<div class="product-images">';

					$thumbnail_id = get_post_thumbnail_id();
					$image_title = esc_attr( get_the_title( $thumbnail_id ) );

					$image_src = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
					$image_full = wp_get_attachment_image_src( $thumbnail_id, 'large' );

					echo sprintf( '<div class="product-image" style="background-image: url( %s );"><a href="%s" itemprop="image" class="woocommerce-main-image" title="%s"></a></div>', $image_src[ 0 ], $image_full[ 0 ], $image_title );


				echo '
				</div>
				<div class="product-thumbnails">';

					foreach ( $attachment_ids as $key => $attachment_id ) {

						$image = wp_get_attachment_image_src( $attachment_id, 'thumbnail' );
						$image_src = wp_get_attachment_image_src( $attachment_id, 'medium' );
						echo sprintf( '<div class="product-image-thumbnail" style="background-image: url( %s );"><a href="%s" data-variation-id="' . $key . '"></a></div>', $image[ 0 ], $image_src[ 0 ] );

					}

				echo '</div>';

			} elseif ( count( $attachment_ids ) === 1 ) {

				echo '<div class="product-images product-image-single">';

					$thumbnail_id = get_post_thumbnail_id();
					$image_title = esc_attr( get_the_title( $thumbnail_id ) );

					$image_src = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
					$image_full = wp_get_attachment_image_src( $thumbnail_id, 'large' );

					echo sprintf( '<div class="product-image" style="background-image: url( %s );"><a href="%s" itemprop="image" class="woocommerce-main-image" title="%s"></a></div>', $image_src[ 0 ], $image_full[ 0 ], $image_title );

				echo '</div>';

				
			} else {

				echo '<div class="product-images product-image-single">';

					$thumbnail_id = get_post_thumbnail_id();
					$image_title = esc_attr( get_the_title( $thumbnail_id ) );

					$image_src = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
					$image_full = wp_get_attachment_image_src( $thumbnail_id, 'large' );

					echo sprintf( '<div class="product-image" style="background-image: url( %s );"><a href="%s" itemprop="image" class="woocommerce-main-image" title="%s"></a></div>', $image_src[ 0 ], $image_full[ 0 ], $image_title );

				echo '</div>';

			}

		}

	} else {

		echo '<div class="product-images product-image-single">';

			$thumbnail_id = get_post_thumbnail_id();
			$image_title = esc_attr( get_the_title( $thumbnail_id ) );

			$image_src = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
			$image_full = wp_get_attachment_image_src( $thumbnail_id, 'large' );

			echo sprintf( '<div class="product-image" style="background-image: url( %s );"><a href="%s" itemprop="image" class="woocommerce-main-image" title="%s"></a></div>', $image_src[ 0 ], $image_full[ 0 ], $image_title );

		echo '</div>';

	}

	echo '</div>';

}
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_before_single_product_summary', 'projectnamespace_product_images', 20 );