If you disable the zoom on mobiles, then all the gallery functionality goes back to the default one.
If you want to simulate the thumbnail/main image switching behavior, you can try adding the following JavaScript code to the website:
jQuery(document).ready(function( $ ){
var exchange_thumbnails = '0';
$("a[data-rel^='prettyPhoto']").each(function(index){
$(this).click(function(event){
// If there are more than one WooCommerce gallery, exchange the thumbnail with the closest .attachment-shop_single
var obj1 = $(".attachment-shop_single");
if ( obj1.length > 1 ) {
var obj1 = $(this).closest('.images').find( $(".attachment-shop_single") );
}
var obj2 = $(this).find("img");
event.preventDefault();
if ( obj2.hasClass('attachment-shop_single') === false ) {
// Remove the srcset and sizes
obj1.removeAttr('srcset').removeAttr('sizes');
obj2.removeAttr('srcset').removeAttr('sizes');
var thumb_src = obj2.attr('src');
// Exchange the attributes
$.each(['alt', 'title'], function(key,attr) {
var temp;
if ( obj1.attr( attr ) ) temp = obj1.attr( attr );
if ( obj2.attr( attr ) ) {
obj1.attr(attr, obj2.attr(attr) );
} else {
obj1.removeAttr( attr );
}
if ( exchange_thumbnails == '1' ) {
if ( temp && temp.length > 0 ) {
obj2.attr(attr, temp);
} else {
obj2.removeAttr( attr );
}
}
});
// Exchange the link sources
var temp;
temp = obj2.parent().attr('href');
if ( exchange_thumbnails == '1' ) {
obj2.parent().attr('href', obj1.parent().attr('href'));
}
obj1.parent().attr('href', temp );
// Set the obj1.src = the link source
obj1.attr('src', temp );
// Set the obj2.src = data-thumbnail-src
if ( obj1.data('thumbnail-src') && exchange_thumbnails == '1' ) {
obj2.attr( 'src', obj1.attr('data-thumbnail-src'));
}
}
});
});
});
