How to Create a Stacked Gallery for WooCommerce Single Product Page

Updated on:

The stacked gallery in the Niche can be created with 2 Hooks Elements and some CSS.

1. Gallery Stack hook element

Create a Hook Element called Gallery Stack with the following content:

<div class="woo-summary-wrap"><!-- open wrap -->
	<div class="woo-gallery-stack hide-on-mobile">
		<?php 
			global $product;

			// Get post product thumbnail
			if ( has_post_thumbnail( $product->get_id() ) ) {
				$attachment_ids[0] = get_post_thumbnail_id( $product->get_id() );
				$attachment = wp_get_attachment_image_src( $attachment_ids[0], 'full' ); 
				$attachment_alt = get_post_meta( $attachment_ids[0], '_wp_attachment_image_alt', TRUE);
				$attachment_title = get_the_title( $attachment_ids[0] );
			?>    
				<img src="<?php echo $attachment[0] ; ?>" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachment_title; ?>" width="<?php echo $attachment[1]; ?>" height="<?php echo $attachment[2]; ?>" loading="lazy" />
			<?php 
			}

			// Get Product Gallery Images
			if ( method_exists( $product, 'get_gallery_image_ids' ) ) {
				$product_image_ids = $product->get_gallery_image_ids();

				foreach( $product_image_ids as $product_image_id ) {
					$image = wp_get_attachment_image_src( $product_image_id, 'full' ); 
					$image_alt = get_post_meta( $product_image_id, '_wp_attachment_image_alt', TRUE);
					$image_title = get_the_title( $product_image_id );
					echo '<img src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $image_alt . '" title="' . $image_title . '" loading="lazy">';
				}
			}
			// Closing div found in Close Summary Wrap element
		?>
</div>

Hook name: woocommerce_before_single_product_summary

Display Rules: Product > All Products

2. Close Summary Wrap hook element

Create a Hook Element called Close Summary Wrap with the following content:

</div>
<!-- Close gallery wrap -->

Hook name: woocommerce_after_single_product_summary

Display Rules: Product > All Products

3. CSS

Add the following CSS:

/*--- SINGLE PRODUCT ---*/

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 769px) {
	.woocommerce-product-gallery {
		display: none;
	}

	.woo-summary-wrap {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: auto;
		margin-bottom: 80px;
	}

	.woo-gallery-stack {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.woo-gallery-stack img {
		margin-bottom: 20px;
	}

	.woocommerce-tabs {
		grid-column: 1;
	}

	.woocommerce div.product div.summary {
		grid-column: 2;
		grid-row: 1;
		margin-left: 80px;
		position: -webkit-sticky;
		position: sticky;
		top: 105px;
		bottom: 100px;
		padding-right: 80px;
	}

	.single-product span.onsale {
		position: absolute;
		top: 0;
	}
}

Learn how to add CSS: https://docs.generatepress.com/article/adding-css/