[Resolved] Generate Press WooCommerce CSS is conflicting with the Woopack CSS

[Vernita]

Hi

I’m sure you know already but there seems to be a conflict between Generate Press WooCommerce CSS and Beaver Builder Woopack CSS. The developers of Woopack is aware of it and is working on it, but I was wondering if you had some CSS that I can just add to my stylesheet to fix the problem in the meantime?

Many Thanks
Vernita

[Tom]

Hi there,

What’s the conflict, exactly? Not sure what I should be looking for.

Let me know 🙂

[Vernita]

Hi Tom

sorry I thought it might be a known issue. This was my email to them:

Hi

I have tremendous problems with the one specific page on this site. The settings won’t stick.

On the Gift card row, if I change column widths for medium devices, it just won’t change the width of the column when the browser is resized. It sticks to 3 even columns for all sizes. Actually the third column keeps displaying underneath the product however the width seem to be in place. I’ve cleared BB cache and browser cache.

And when I add the product grid it shows all the products in one column instead of 4 columns.

Can you help please:

https://www.daykini.co.za/bikini/

To make the site presentable I had to change the grid to display when logged in only (I assume that is not for subscribers that are logged in but just admin? The grid that shows correctly is displayed with shortcode. I also changed the column settings of the Gift Card Product row to only display in big screens – just so that it looks a little better until we get the problem sorted.

Earlier today I tried to use to saved rows on the page, but the sizing chart row kept shrinking down if I change the other saved row’s width. It’s as if they were nested but they were not. They were two separate saved rows created on separate days. I’ve had to make the Gift card row not global just to get it to work. Don’t know if that gives you any clues to what is going on?

Kind Regards
Vernita

And this was the response:
Hi Vernita,

Thank you for getting in touch with us. We checked the site and this issue is also coming because of GeneratePress conflict.

We have debugged the conflict to a GP hook in the GP Premium WooCommerce Modules which is adding an extra container to the code which is affecting all the WooPack’s CSS. Please check the attached screenshot.

This hook can be unhooked by adding the following lines of code in the active themes functions.php file and the layout will be fixed. You can use this same code on the previous site where there was GP conflict and reactivate the WooCommerce Module provided by GP Premium.
remove_action( ‘woocommerce_before_shop_loop’, ‘generatepress_wc_before_shop_loop’, 10 );
remove_action( ‘woocommerce_after_shop_loop’, ‘generatepress_wc_after_shop_loop’, 10 );

Let me know if you have any questions or if there’s anything else I can help you with.

Thanks!

I’ve also had to disable the Woocommerce model on other sites because the CSS clashes with that of Woopack. On this site I could get around it by using:
.woopack-modal-content .woocommerce div.product form.cart .woocommerce-variation-add-to-cart div.quantity{
display:flex;
}

It’s a bit of a pain because I really need both GP and WooPack 🙂

Many Thanks
Vernita

[David]

Hi there,

in your child theme style sheet you have this CSS:

.woocommerce ul.products li.first {
    margin-left: 2% !important;
}

Try removing that.

[Vernita]

Thank you David. I took it out – Goodness know why it was there in the first place 🙂 But that could not have fixed the grid problem or the column margin problem?

[David]

Did it fix the problem?

[Vernita]

Yes the problem is gone, but I’m thinking maybe the WooPack did something on their side if you didn’t? Left margin on the first element of a Woo product could not change problems with Beaver Builder columns, they have nothing to do with each other? Maybe it was magic 🙂

[David]

Whether its BB, GP or Woo Pack they all output columns using the Woocommerce Markup.

Each column has a set % width, and the column gaps are set using % margins.
The total widths and margins of all columns in a row must add up to ( or be less than ) 100%.
By adding the 2% margin to the first column they now add up to 102%. Which means there isn’t enough room for the last column and its forced to the next row.

Unless you received an update for the Woo Pack plugin, then i can’t account for it being anything other then the CSS or its magic 🙂

[Vernita]

Whether its BB, GP or Woo Pack they all output columns using the Woocommerce Markup. I did know know that! Very interesting. Thank you for the explanation.

On another site https://www.lenslove.co.za/product-category/camera-bags/ – the WooPack support person disabled GP’s Woocommerce module because they said the CSS conflicted with their CSS.
I think this is the CSS that made trouble because when I disabled this it worked fine:
.woocommerce .wc-columns-container.wc-columns-3 .products {
grid-template-columns: repeat(3,1fr);
}

Any thoughts?

Kind Regards
Vernita

[David]

GP uses CSS Grid to set the columns in Woo, which only applies if the GP woocommerce module is on. So if you don’t need the GP formating then yes it is best that you leave it off.

[Vernita]

Thank you for your time and trouble. Much appreciated!!

[David]

You’re welcome

[Author]

Posts