CAROUSEL SINGLE PRODUCT TABLET

Hello,
Is there a way to not have the carousel on single product pages on tablet please?
I set 2 images next to short description and would like to show them both displayed on tablet as on desktop.
Thank you

Hello,

You can configure the grid in the Theme Settings > Single Product > Images by means of the Theme preset for mobile: https://xtemos.com/docs-topic/theme-settings-presets/

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

Best Regards

Thank you, I set a preset “custom” equals “Is mobile device”, then went on single products, images, I don’t know what to uncheck then please?
The “thumbnails position” is already on the good position (column 1) by inherit. On tablet it is still with carousel.

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

Thank you it has well disabled the carousel but it has not displayed the second image below the main image as on desktop.

Sorry, I have checked again and it seems that it doesn’t work.

Hello,

I am terribly sorry, I have sent this code by mistake.

Please remove the code and provide the product page URL with the images and provide the screen of how you want to place the images on the tablet.

Please remove the provided code.

Best Regards

Hello,
Yes the code is not good, it has only put my description area in tabs accordion closed.

About the product page, it includes all my product pages. My wish would be to make (only on tablet, not mobile) the same layout than on desktop.
(1 main image + 1 additionnal image below, in 1 column). Please see screenshot.
Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Setting > Custom JS > On document ready.

if (jQuery(window).width() >= 768) {
	setTimeout(function () {
		   jQuery('.woocommerce-product-gallery__wrapper.owl-carousel').trigger('destroy.owl.carousel').addClass('owl-loaded');
			}, 500);
}

Best Regards

It works perfectly thank you very much.

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts