Woocommerce works fine with iPhone and iPad, I have several Woo-based sites that work as they should. It’s definitely a theme issue, I’m digging through the code now to see what I can find. This is just the most recent of many bugs I’ve found with this theme (and it’s a biggie). I love the MikMag theme but I’ve damn near had to become a PHP developer to get it working right, and I have too much time (and money) invested in it now to move on to something else.

TD – any response to this issue?

Man, I should be on TD’s payroll. The problem is in the theme.js file. Particularly this section:


// WooCommerce product items
//
jQuery('ul.products .product').each(function(index, element) {
var element = jQuery(element);
var imgEl = element.children('img');
var container = element.find('.product_hover_container');

var ANIMATE_SPEED = 800;

// Hover effects
container.hide();
container.css(‘visibility’, ‘visible’);

if (isTouch) {
var startEvent = ‘click’;
var endEvent = ”;
} else {
var startEvent = ‘mouseenter’;
var endEvent = ‘mouseleave’;
}

element.bind(startEvent, function(event) {
container.css(‘top’, (imgEl.outerHeight(true) / 2 – container.height() / 2) + ‘px’);
container.css(‘left’, (imgEl.outerWidth(true) / 2 – container.width() / 2) + ‘px’);

container.stop(true, true).fadeIn(ANIMATE_SPEED / 2);

event.preventDefault();
return false;
});
if (endEvent !== ”) {
element.bind(endEvent, function(event) {
container.stop(true, true).fadeOut(ANIMATE_SPEED);

event.preventDefault();
return false;
});
}
});

This applies to the product listing page and is trying to tell the touchscreen how to handle the touch events. I’d be lying if I said I knew where the error was in the coding, but obviously there is one.

What I do know is by stripping that section out of the theme.js file, as well as the fancy “black bars” overlay on product thumbnails from content-product.php, I now have iPhone clickable links to products. I’ve lost the black bars overlay functionality, but I was planning on getting rid of that as most products on my site are variable and can’t be directly added to the cart anyway, so no loss there. It’s definitely an issue that needs to be fixed though.

Kevin, have you made headway with this issue? I’m dealing with the same thing.

Hi Marc,

Are you getting this problem on the latest version of mikmag?

I’ve just tested our demo site on my ipod touch and it appears to work properly.

Kevin

yes. this is the latest version. and the demo site is not responsive, is it?

I was having the same problem with the Empress theme. Interestingly, making the start and end events in the Touch section of code the same seems to make it work on ipad and iPhone. Eg:

if (isTouch) {
var startEvent = ‘mouseenter’;
var endEvent = ‘mouseleave’;
} else {
var startEvent = ‘mouseenter’;
var endEvent = ‘mouseleave’;
}

Removing the if statement altogether would work too I assume. Question is, will this break anything else? Seems fine on desktop so far!

Perhaps someone with more JS experience can give us more insight.