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

Home Forums Support Modify “Niche” template from the Site Library – Single Product Page

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1512158
    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!

    #1512549
    David
    Staff
    Customer Support

    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;
    	}
    }
    #1512840
    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.

    #1513348
    David
    Staff
    Customer Support

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

    #1513545
    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 🙂

    #1513555
    David
    Staff
    Customer Support

    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.

    #1513595
    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

    #1513604
    Ruben

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

    .woocommerce-tabs {
    		width: 60% ;
    	}

    And that did the trick. Thank you.

    #1514243
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.