Archived topic
Niche theme
3 replies · Started by Jessy on November 13, 2022
Hello,
I install my first ecommerce website, I choose niche theme.
I copy all of the demo files.
I didn't understand why I have this code on my first test product page.
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] ); ?> <?php echo $attachment_alt; ?> 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 '' . $image_alt . ''; } } // Closing div found in Close Summary Wrap element ?>
I found some answers on the forum. I create a child theme and I take php snippets to activate this line :
add_filter( 'generate_hooks_execute_php', '__return_true' );
Thanks to : https://docs.generatepress.com/article/adding-php/
But now, i haven't the code but 2 pictures and I don't know why.
It's like the theme put my product pictures on the top and on the product instead of only on the product.
Can you help me please?
Best regards,
Jessy
Hi there,
Niche uses a custom stacked gallery for the desktop view.
See here for example:
https://gpsites.co/niche/product/happy-ninja-2/
And it seems your site is missing the CSS required to do that.
Add this:
/*=== WOOCOMMERCE ===*/
/*--- 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;
}
}Or if you just want the standard Woo gallery image, then DO NOT add the CSS and instead:
1. Go to Appearance > Elements.
2. look for the 2 elements title: Gallery Stack and Close Summary Wrap. Quick Edit them and set their Status to Draft.
Hi David,
Thanks a lot, it works :)
Best regards,
Jessy
Glad to hear that!
