Product descriptions underneath product

[zoepayne42]

Hi,

I recently updated to the latest version of X and now my woocommerce product pages look different.

Previously the main product picture would have taken about a third of the screen on the left, then the product name, descriptions, price etc would be on the right in the remaining 2/3rds. Something has now changed so the picture is much bigger and all the content is now pushed underneath the image leaving loads of white space on the right hand side,

I cant be be 100% sure but I think this happened when I upgraded to the latest version of X.

Here is an example page: https://www.sandandseagulls.co.uk/product/gulls-flight-blue-wall-art/

Please can you advise?

Thanks

[ruenel]

Hello Zoe,

Thanks for writing in!

After doing the updates, always remember to clear all caches since you are using WP Rocket so that the code from the latest release is always in use. This will help you to avoid any potential errors. And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

This links might help:

• https://docs.wp-rocket.me/article/133-manually-clear-wp-rocket-cache
• https://docs.wp-rocket.me/article/53-clear-wp-rocket-cache

Please let us know how it goes.

[zoepayne42]

Hi, I had already cleared all caches so that isn’t the cause.

Please can you advise.

Thanks

[lely]

Hi Zoe,

Would you mind turning off WP Rocket minification?
It is because of this CSS:

.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;
    width: 100%;
}

I am not sure if this is actually coming from which file because it’s minified file. Try to turn off minification, clear cache and try again. If the issue persists, please share credentials inside a secure note so we can double check your setup. Thank you.

[zoepayne42]

Hi, thanks for your message.

Tried that but it didnt work. I will share some credentials shortly and would appreciate you taking a look.

Thanks

[lely]

Hi Zoe,

You do have multiple caching and minification. There’s Wp rocket and Siteground. It is like caching an already cache content. Try to turn off Siteground minification too and clear cache.

See this screencast: https://screencast-o-matic.com/watch/cq6oXGuxaJ

.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;
    width: 100%;
}

Look for that custom CSS and remove it. It overrides renew stack style for that page.

Hope this helps.

[zoepayne42]

Hi, thanks for that. Disabling minification from the SG Optimiser plugin seemed to have fixed the issue.

Having said that, I dont understand why it fixed it when I havnt removed the css that you mentioned? I also have no idea where that css has come from and where to find it as it is not located in the additional css section of the X editor?

Thanks

[jade]

Hi Zoe,

Perhaps it could be the cached version that is why the code is showing or try checking in X > Theme Options > CSS:

Hope this helps.