[Support request] Woo product columns problem with GP Pre

[Inga]

Hi there,

Let me first thank you for the great plugins and work you are doing 🙂

I do have GP Pre and LH Consulting Target from your site library, so the front page uses GP Pre elements. There is a problem with the WooCommerce columns and with some other automatic generated pages also.

If I change the column settings under Appearance > Customize > WooCommerce > Product Catalog to for example three, the customize preview shows the products in three columns, but on the webpage products are shown only in one column.

There are also same kind of problems for example with 404- ja MailPoet -pages, the layout of them do not look the same as the other pages. The content of these pages is on the very top of the page, nearly over the menubar.

I have tried everything I can do to fix this (notice I am not a code-person), for example widen the width of content box etc. It seems to me that this has something to do with that how the theme shows automatic generated shortcodes for example with GP Pre elements.

I have tried to create a new page with Gutenberg, chose Gutenbergs code block and put the woo code [products] there. This way the products are shown in three columns just as they should.

As for the Woo default shoppage (or the other ones I mentioned above eg 404, MailPoet) I cannot modify them myself with my knowledge level.

So please, could you give me a hand with this issue. Thanks!

[David]

Hi there,

looks like a Caching problem. If you have a cache plugin can you flush/purge it and disable it. And let me know if the problem persists.

The site is using some custom CSS to create the overlapping effect. So go to Customizer > Additional CSS and look for this block of code:

body:not(.home):not(.woocommerce) .site.container {
    margin-top: -40px;
}

and replace just that block with:

body:not(.home):not(.woocommerce) .page-hero +.site.container {
    margin-top: -40px;
}

This will only apply the overlap to normal pages when there is the page hero above the content.

[Inga]

Hi David,

Thank you very much for your prompt reply.

As for the Woo Product layout problem I did purge the cache plugin (actually several times, no influence) and also disabled it. As long as the plugin was disabled, the product columns were shown correctly but as soon as I enabled the Cache plugin again, the problem appeared again. So, you were right, it is a Caching problem. This problem occurred after I installed the Target, before that I had GP Pre with sections.

So, how to fix this, please?

The other thing you kindly advised, replacing the custom CSS, I found the block of code you mentioned, but in your message the block code was shorter than in my website, eg something was missing. Therefore I did not have the courage to replace the block of code. Please could you confirm me, whether the new block of code is correct, nothing missing from it.

The custom CSS on my site is the CSS of Target.

[Tom]

Hi there,

It looks like the caching plugin is ignoring a media query in our mobile menu CSS request, which is a shame. Which plugin are you using? Are you able to try any others? If not, is there an option to ignore one of the CSS files from being combined?

As for the CSS, can you share the full CSS of the block you found? David’s CSS looks good, but it’s worth checking out.

Let us know 🙂

[Inga]

Hi Tom,

Thanks for you promt reply 🙂

The plugin is LiteSpeed Cache and it is not possible for me to try some other one nor change it as it is provided and installed by the hosting service provider. And also, my website is quite fast with the combination it has just now, so I am not so keen on switching anything there. Sorry for that. I googled and it seems that there are this kind of problems with some themes. As for the CSS combinations, I do not know about that and how to do it.

Please find below the CSS of the block I found. As for David’s CSS I was wondering, does the page hero in it mean the normal pages having not any pictures in the header, just the different “colour line” there. I hope you understand what I mean.

body:not(.home):not(.woocommerce) .site.container {
margin-top: -40px;
}
}

Then there is the following block, I do not know whether it is relevant for this issue or not.

body:not(.home):not(.woocommerce).separate-containers .site-main {
margin-top: 0;
}

Waiting for your reply!

[David]

This article may be of help to eliminate the Litespeed setting that is causing the issue:

https://blog.litespeedtech.com/2018/01/31/troubleshooting-lscache-optimization/

Generally this happens when Combine CSS settings are chosen.
As you’re server is using HTTP2, which means it can manage more simultaneous requests, then combining CSS files is not always necessary for better performance

[Author]

Posts