Adding 3×3 Image Gallery in Single Product Page

Hello there

I want to add a 3×3 image gallery on the single product page. However I cannot find any relevant on Theme Setting > Single Product.

I want the gallery to show in place of thumbnails.

I will appreciate any help I can get.

Best Regards

Dawood Ahmad

Hello,

Please add this code to the Theme Settings > Custom JS > On document ready:

jQuery(document).on('mouseenter', '.product-image-thumbnail:not(.active-thumb)', function(){
	var $thumbsOwl = jQuery('.images .thumbnails');
	var $mainOwl = jQuery('.woocommerce-product-gallery__wrapper');
	var i = jQuery(this).parent().index();
	$thumbsOwl.trigger('to.owl.carousel', i);
	$mainOwl.trigger('to.owl.carousel', i);
});

Best Regards

Hello Elise

Thank you for the help. I added the code in the CustomJS in “Settings > Custom JS > On document ready” section. However, the product page is still not showing a 3×3 image grid on the single product page. Kindly check

https://legion.com.pk/product/peak-caps/

Can you please tell me how can we achieve a 3×3 image grid on the single product page.

Thank you for your help, I really appreciate it.

Best Regards

Hello,

Please insert the site admin access into the Private content below the message area.

Best Regards

Kindly check

Hello,

I have double-checked with our development team, it is not possible to place the grid under the main image. You can create an HTML block, and add it as an extra block to the product page: https://xtemos.com/docs-topic/product-page-local-settings/

If you have any questions please feel free to contact us.

Best Regards

Hello Elise

I think there might have been some misunderstanding. I want to show the 3×3 grid for the product image IN PLACE OF the current image showcase.

I want to replace the current image look with a 3×3 image grid.

Please recheck

Hello,

Could you provide the URL sample or screen of what you want to achieve, so that I could submit that to our development department?

Best Regard

Hello Elise

I really appreciate your patience and your willingness to work with me. It speaks volumes about the quality of support at Xtemos.

I have attached an image that shows my desired look. The current image look will be replaced with a 3×3 grid.

Here is link to the page with its current look.
https://legion.com.pk/product/badges/

Nothing else will change on the single product page.

Please proceed.

Looking forward to hearing from you again!!!

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, it is not possible to make exactly as you show.

I have checked with our developers we can give you a solution for such a layout: https://gyazo.com/46440526375968218a2d8f1176281b6c

Best Regards

Hello Elise

I appreciate your response. However, if that is not possible for you, is it not possible for anyone to make the desired changes?

If achieving this look is not possible for your team but someone else with better skills can do it, tell and I will hire someone else.

I still commend your quality of service. Good job on your part as a customer support

Hello,

We are sorry we can hardly provide the design you need. It is not possible to suggest you a quick solution.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts