Archived topic
Display thumbnails at the product gallery
5 replies · Started by Jan on November 27, 2021
Hi guys,
please see the thumbnail settings in the product gallery. The added photo is big, I can't find where to set it.
Thank you for the advice.
Hi there,
the Niche site has a custom product page with a stacked gallery on desktop. Do you want to remove that and display the standard carousel?
Hi David, yes, I would like to, it is very confusing with a large number of photos, as you can see.
Try removing these two Elements:
https://www.screencast.com/t/fEE6C1JX
And remove this CSS from Additional CSS field in the customizer:
/*=== 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;
}
}
/* Add some space above price tag */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins {
margin-top: 10px;
}
/* Breadcrumn and post meta styling */
.product_meta>span,
.woocommerce-breadcrumb {
text-transform: uppercase;
font-size: 12px !important;
font-weight: 500;
}
.woocommerce div.product div.summary .woocommerce-breadcrumb {
margin-bottom: 40px;
}
That should turn the single product page back to the default styles.
Let me know :)
Hi Leo, thank you for your help, now it's ok.
Enjoy the day.
No problem :)