[Support request] woocommerce product page content disapears with reduced display size

[Dale]

I recently installed WP-Optimize Premium – Clean, Compress, Cache and noticed my mobile iphone product display only contains the product image. No description, price, add to cart button, etc. The issue can also be seen by reducing the display size on my windows desktop display. Reaching out to WP-Optimize, they say the issue is with the amplitude api. Not sure what to do with that piece of information. https://www.nutristand.com/product/arginine-hge-drink-mix/

[Leo]

Hi there,

Reaching out to WP-Optimize, they say the issue is with the amplitude api. Not sure what to do with that piece of information.

Did you follow up with them if you aren’t sure what the information meant?

I can’t see how this would be a theme issue at all and would assume it’s either an issue with WP-Optimize Premium or WooCommerce itself.

If WPO’s support team thinks it’s a theme issue, can you ask them to provide more information?

[Dale]

Hello again,

If I activate the WP-Optimize plugin and the Generate Press Plugin with the WooCommerce Module for layout options, my mobile display only contains the product images – no buy now, description, price, etc. Disabling either plugin corrects the issue.

Here is some more information from WP-Optimize

“Hi Dale,

This is Venkat from development team.
A CSS rule causes issue in mobile display. You need to find out which plugin or theme adds the rule and remove it.”

I have an email with images of the code that needs to be changed, but I can’t post the image here.

So I will forward an email to support with the images.

Thanks!

Dale

[Leo]

Not sure if I fully understand.

So disabling WP-Optimize plugin solves the issue? If so I would think that one of the plugin settings is causing the issue.

Can you please follow up with their support?

And what code did they suggest that needs to be changed?

[Dale]

Please check the support email to see the code that need changing. As I said it is an image that I can’t post here.

[Dale]

Leo,

I see now that I can link to an image but I think that would require me to save the image from my email to a local file and FTP it to a public directory so I can then link to it. Could you be so kind as to look at the email I send to support that has the images? Also WP-Optimize has looked at the issue and it does not appear to be a setting. Disabling your woo module fixes the problem also, so the balls in your hands right now.

[Leo]

Can you provide the screenshot using a method like this?
https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

It’s much better if we can keep all conversations and information in one place.

Also WP-Optimize has looked at the issue and it does not appear to be a setting. Disabling your woo module fixes the problem also, so the balls in your hands right now.

I can’t see how the WooCommerce module would cause this issue – we have not had any other reports on this with any other caching or optimization plugin.

Are you able to start a staging site so we can go through some further debugging steps?

[Dale]

Hi Leo,

Here are the images, thanks for the direction on posing images.

Will it be possible to fix this with additional css code? If not I will create a staging site. let me know if I should still look fro other conflicting plugins.

Best regards,

Dale

[Leo]

I’m not sure why that code would cause a conflict with WP Opitmize.

The same code is used in a site library template default install here and does not cause any issues:
https://www.screencast.com/t/G63GTR1Euf

Can you follow up with WP Opitmize’s support team and ask why their plugin would cause this conflict?

You can show them this page without their plugin for example:
https://gpsites.co/seller/product/happy-ninja/

It’s the exact same code.

[Dale]

Leo,
Can you write a small CSS script to disable this specific command?
Thanks!
Dale

[David]

Hi there,

the issue is because the Optimization plugin is messing with the loading order of the sites CSS.
For example – the Woocommerce plugin and GP loads its CSS responsively – there are two mobile stylesheets for mobile woocommerce-smallscreen-css and generate-woocommerce-mobile-css.

And they are enqueued like so:

<link rel="stylesheet" id="woocommerce-smallscreen-css" href="https://gpsites.co/niche/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=6.3.1" media="only screen and (max-width: 768px)">

<link rel="stylesheet" id="generate-woocommerce-mobile-css" href="https://gpsites.co/niche/wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css?ver=2.2.0" media="(max-width:768px)">

Where the media="only screen and (max-width: 768px) attribute tells the browser to only load those stylesheets on smaller screens

And it is these two style sheets that are responsible for the mobile layout – specifically this one:

woocommerce-smallscreen-css

And on your site that CSS has been “lost” amongst the combining of the CSS which is breaking the layout.

Watch this video:

https://www.screencast.com/t/NJsW8uvqFeu

1. i start with the Seller Site from the GP Site library. And it looks OK.
2. i delete ( cut ) the woocommerce-smallscreen-css and you see the layout breaks just like your site,
3. i then paste the woocommerce-smallscreen-css into your site and the layout is fixed.

The Optimize plugin author should fix this, it should be as simple as excluding woocommerce-smallscreen-css stylesheet from their optimizations.

[Dale]

David,

Thanks much! Just to confirm, and one more question. When I disable the GP WooCommerce Module for layout options, all is fine. I have not tested other plugins for conflicts with this module. Could there be another plugin involved in this issue?

Thanks again!
Dale

[David]

The GP Premium Woocommerce module adds extra customizer functions in Customizer > Layout > Woocommerce.
One of which allows you to change the width of the Product Image layout. That uses CSS to create a row layout. But that CSS should only apply to desktop as on smaller screens the above smallscreen and mobile CSS kicks in.

Those mobile stylesheets by default are loaded after most other styles so they override the desktop styles.

That plugin is moving ALL of the mobile/smallscreen CSS into its own inline stylesheet ie.

<style id="wpo-min-header-1" media="only screen and (max-width: 768px)">

And its loading it at the very top of the head, before any other CSS.
So those styles now get overwritten by desktop styles.

See here – where you can see their stylesheet and look what happens when i move it down the stack to load after the other styles:

https://www.screencast.com/t/2933rl1gv

The plugin developer really should look handle the issue as its there code that is moving the CSS.

[Author]

Posts