[Support request] Woocommerce mobile width breakpoint for single product page

[Boris Jelen]

Hi,

How can I change mobile width breakpoint for single product page? Below is an example of screen copy how single product page looks when I change width of browser window – it looks too “squeezed”. I would need to set breakpoint at least 50-100 px sooner…

https://ibb.co/0YKhDCb

[Elvin]

Hi,

You can try this PHP snippet.

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

Just change the “767px” to a value of your preference.

[David]

Hi, I’m struggling with this. On mobile (example, iPhone 6 and above), the product images shows but I get the product name and everything else vertically in text. https://www.soundscapesmedia.com/product/the-glenn-ferris-italian-quintet-animal-love/

Any thoughts please?

[Elvin]

Hi David,

On Appearance > Customize > General, can you try setting the structure to “Flexbox”?

After setting, clear any cache and check the page again.

Let us know how it goes.

[David]

Hi Elvin, no joy with that, sorry.

[David]

Hi there,

first thing can you try adding the snippet provided here:

https://generatepress.com/forums/topic/mobile-layout-of-woocommerce-shop-has-changed/#post-1871380

Once thats in place i can take another look.

[David]

Thanks, I’ve added that to the child functions.php.
It’s OK on a slimmed-down dev site so maybe I have a plugin conflict somewhere.
Dave

[David]

I think I’ve fixed it. The Variation Images plugin was causing it. I no longer need that plugin so it’s off and all looks OK.

[David]

Yeah – i was just looking and noticed there was a different Gallery coming from that plugin.
Glad to hear you found the solution!

[Author]

Posts