Topic: Product Image Display on the “Niche” Template

nelcho
January 19, 2024 at 4:38 pm

I hope you are having a good day. I am reaching out because I am using the “Niche” template on my website, and I appreciate its minimalist design. As I am taking my first steps with WordPress code, I need some assistance with a few matters.

Firstly, I would like the product images to be displayed on larger devices in the same way they appear on mobile devices. On mobile, the first image is shown in a large size, and the remaining images are displayed below it in three or four columns as thumbnails.

I attempted to achieve this by installing the “Gallery Slider for WooCommerce” plugin because I like how it presents product image galleries. The plugin allows for the placement of three or four columns of images as thumbnails, hides additional product images if they exceed three or four items, and enables me to view them all by clicking arrows to advance or go back through the images. However, upon installation, it did not work; it seems that the theme does not allow changes to its basic configuration.

I also tried modifying some elements in the “Additional CSS,” but as I am still unfamiliar with the classes to be modified, and I am unsure if all necessary classes are present, I was unable to achieve the desired outcome.

Could you please provide me with any code that might help me achieve what I am looking for? Alternatively, can you guide me on how to deactivate the configuration that prevents me from correctly seeing the changes made by the “Gallery Slider for WooCommerce” plugin?

I appreciate your attention and assistance in advance.

Best regards

David

January 20, 2024 at 4:29 am

Hi there,

first off, no additional plugins are required.
The Niche site comes with some customisation that removes the gallery slider on desktop. And we just need to remove those changes:

1. Go to Dashboard > Appearance > Elements and DELETE ( or Quick Edit > Status set to Draft to disable ) these 2 elements:

Gallery Stack
Close Summary Wrap

2. Go to Customizer > Additional CSS and look for and DELETE this CSS:


/*=== 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;
	}
}

And thats it, the single product will show the default gallery on all devices.

nelcho
January 20, 2024 at 9:36 am

Excellent solution, thank you very much for your help. It worked perfectly.
David
January 21, 2024 at 3:15 am

Glad to be of help!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Product Image Display on the “Niche” Template