Site logo

Archived topic

Display thumbnails at the product gallery

5 replies · Started by Jan on November 27, 2021

Viewing posts 1–6 of 6

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 :)

This archived topic is closed to new replies.