Archived topic
Change Single Product Image Layout
4 replies · Started by Luciano on April 22, 2020
Hi guys,
I am using the Niche theme as my base theme for my site. The one thing I am not finding to be working for me is the single shop image layout. Since I am going to have a lot of images of one product the Niche theme will not work because there will be a lot of scrolling to get to the bottom; where the description, reviews, etc. are.
Is there a way I can incorporate the style of the "Seller" them in your library?
I mainly like the fact that it displays images below the main image as thumbnails. The Merch theme does something similar.
Hope this makes sense. Thanks for the help!
Luciano
Hi there,
Can you go to Additional CSS field in the customizer and remove this block of CSS first?
/* Stacked Gallery for desktop and sticky summary */
@media (min-width: 768px) {
.woocommerce-product-gallery {
display: none;
}
.woo-sumamry-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: 20px;
position: -webkit-sticky;
position: sticky;
top: 130px;
bottom: 100px;
padding-right: 35px;
}
.single-product span.onsale {
position: absolute;
top: 0;
}
}Thanks.
I just removed it. Still shows two large images at the top of the product.
I was able to figure it out I think. I disabled the Gallery Stack Element and it shows up correctly now.
Thanks!
Glad you've figured out :)
