[Support request] Modify “Niche” template from the Site Library – Single Product Page

[Ruben]

Hi there,

So I would like to use the layout of the “Niche” template single product page.

https://gpsites.co/niche/product/happy-ninja-2/

I basically like the proportions and two column division of the page but with a couple of changes:

1. Summary non sticky (this part was easy to modify :))
2. Instead of big images scrolling up I would like to have something like the standard woocommerce product gallery with the big image on top and a few thumbnail images below.

I’ve been playing around with the CSS but I guess the main modifications must be in the code inside the custom Hooks.

Can you help me a bit with this?

Thank you!

[David]

Hi there,

Niche uses the GP Hook Element to add some code.

You will need to create 2 x Hook Elements.

First Hook
Title: Gallery Stack
Hook 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>

Select the Hook: woocommerce_before_single_product_summary
Check Execute PHP
And set the Display Rules to Product > All Products

Second Hook
Title: Close Summary Wrap
Content:

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

Hook: woocommerce_after_single_product_summary
And set the Display Rules to Product > All Products

Then you need this CSS:

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 768px) {
	.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;
	}
}

[Ruben]

Hi David,

Thanks for your answer. It seems that is exactly the same code that Niche uses. I already added that, but what I need is to update that design with a couple of changes:

1. Summary non sticky (this part was easy to modify :))
2. Instead of big images scrolling up I would like to have something like the standard woocommerce product gallery with the big image on top and a few thumbnail images below.

Here’s a mockup: https://imgur.com/a/wFIQ4nA

Any suggestion on how to modify or remove some of the code you gave me to achieve that?

Thanks.

[David]

i am not sure how that would work, as the Carousel would scroll off the screen when the summary is sticky ?

[Ruben]

Hi David,

Thanks for replying. Maybe I didn’t explain what I want correctly. I’ll try again.

I basically need the layout as it is in the Niche product page BUT:

1. No sticky summary.
2. The carrousel as in this mockup https://imgur.com/a/wFIQ4nA

So I basically want to keep only the 2 column proportions of the Niche product page and bring back the carrousel instead of the big pictures scrolling up.

I hope it’s more clear now. Let me know 🙂

[David]

Simply remove the Hook Elements and the CSS that i listed above.
Then you can set the Product Image Area Width to 60% in Customizer > Layout > Woocommerce.

[Ruben]

Embarrassingly simple. Thanks David.

Finally, how do I keep the Woocommerce Tab section also at a 60% width on the left below the images?

So something like this: https://imgur.com/bVjwfo2

[Ruben]

Well, I think I can answer myself. I just tried simply adding:

.woocommerce-tabs {
		width: 60% ;
	}

And that did the trick. Thank you.

[David]

Glad to hear that!

[Author]

Posts