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/