[Support request] Missing Product Short Description – Woocommerce Element problem

[Chris]

I have run GP Premium with the woocommerce module activated for a few years with no problems. In the last week the short description has disappeared from the view on a mobile device. When I check the view status for a mobile from my customise panel it shows it displaying, but when a customer views from a mobile it is missing.
I discovered the possibility of it being linked to the woocommerce module setting in GP by accident when I googled for information and the following support topic (June 23, 2021 at 2:37 am #1831941 – ) came up in search.
If I deactivate the woocommerce module, the short description returns on mobiles but my displays for all views in woocommerce are thrown out.
If I activate the woocommerce module, the views return to normal except on mobiles where the short description is missing and a large blank area is displayed.
I have gone through all steps (as listed) and nothing makes any difference. It has been fine for years until the last week.

[David]

Hi there,

can you share a link to a page where we can see the issue ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

This is one of my product pages, at present the woocommerce module is disabled so the display is thrown out – on desktop the add to basket and price selector are misaligned and I am told on mobiles the short description is a narrow section down the right side instead of being under the image.

https://celticearthspirit.co.uk/product/rewild-your-knowing-buy-course

[David]

Can you enable the Woo module and disable any cache / optimization plugins so i can see whats going on ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

I have disabled WP-Optimise and enabled the woocommerce module

[Chris]

That has just sorted the problem, it didn’t when I did it earlier

[David]

If i check the site now, i can see the Short Description on all devices. And its behaving responsively.
Can you clear any device / browser caches and check?
If its working for you, re-enable the WPO plugin and ill take a look to see whats going on with that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Yes, it is working for me now. It didn’t when I did that earlier. I have re-enabled WPO and the short description on mobile has gone again, I had to check another product page as my phone was showing a cached version of the first one

[David]

If you want us to check with WPO enabled – let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

WPO is enabled and the short description on products has gone again

[David]

OK, so WPO is caching the desktop CSS and loading it after woocommerces mobile CSS.
Aside from talking to the WPO author on how to stop that, you can add this CSS:

@media only screen and (max-width: 768px) {
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
        float: none !important;
        width: 100% !important;
    }
}

That should fix it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Presume if I pop that into my ‘other css’ it is the right place? Tried it there and no change, still missing

[David]

That should be ok.
Can you clear the WPO caches ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chris]

Cleared WPO caches and still not showing, think I may need to change my optimisation plugin.

[David]

Aah… in your CSS the line before the CSS i provide i see:

}.

That . is breaking the code below it.

Delete ALL the CSS in the Addtional CSS and add this:

.sidebar .widget {
    font-size: 14px;
    text-align: center;
}
@media only screen and (max-width: 768px) {
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
        float: none !important;
        width: 100% !important;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts