Solving Product Grid IPad Display Issues

I recently ran into this issue on a WooCommerce website and wanted to share!

I was viewing my WooCommerce site’s shop page on an iPad (portrait mode) and noticed the products were getting shifted (not as dramatically as this example, but still noticeable). After doing some Google searching, I found the following solution:

The following articles explain it better than I can, but in a nutshell the WooCommerce mobile breakpoint doesn’t align exactly with Divi’s.

Add the following code to the functions.php file:

add_filter('woocommerce_style_smallscreen_breakpoint','woo_custom_breakpoint');
function woo_custom_breakpoint($px) {
 $px = '767px';
 return $px;
}

And that should fix it! Here’s an article with a full explanation.

Menu
Google Rating
5.0
Based on 240 reviews
Get a Quote