Adding 3×3 Image Gallery in Single Product Page

This topic has 11 replies, 2 voices, and was last updated 2 years, 9 months ago by Elise Noromit.

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

Author

Posts
February 7, 2022 at 1:25 pm #350912

Dawood260
Participant

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

February 7, 2022 at 6:21 pm #351158
Elise Noromit
Member
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
February 8, 2022 at 5:58 am #351246

Dawood260
Participant

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

February 8, 2022 at 11:20 am #351353

Elise Noromit
Member

Hello,

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

Best Regards

February 9, 2022 at 5:27 am #351547

Dawood260
Participant

Kindly check

February 10, 2022 at 12:32 am #351818

Elise Noromit
Member

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

February 10, 2022 at 5:05 am #351842

Dawood260
Participant

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

February 10, 2022 at 1:55 pm #351993

Elise Noromit
Member

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

February 11, 2022 at 6:51 am #352166

Dawood260
Participant

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.

February 11, 2022 at 2:48 pm #352342

Elise Noromit
Member

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

February 12, 2022 at 6:03 am #352430

Dawood260
Participant

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

February 13, 2022 at 5:16 pm #352612

Elise Noromit
Member

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