[Resolved] Woocommerce product archive not working with new flexbox

[moderndev]

Hey,

Just installed the new updated version 3.

Tried out the flexbox and it works on almost all my sites pages, but not the woocommerce archive pages.

Is this a known issue or is it more likely an issue directly related to my site?

https://moderncooking.com

[Leo]

Hi there,

Sorry is there a specific page/section I should be looking at?

Let me know 🙂

[moderndev]

I have switched off the flexbox as this is a live site.

The issue only effects the woocommerce archive pages like the one linked below.

https://moderncooking.com/en/product-category/kitchen-knives/

[Tom]

Hi there,

Any chance you can show us a screenshot of the issue? Or possibly reproduce it on a staging site?

Let us know 🙂

[moderndev]

Hey Tom,

Here is a link for the screen shot https://snipboard.io/dnwx9z.jpg.

Also, I would be happy for you to take a look at the admin yourself. I have added a temporary login.

Check the link in the “Private information”.

Please just leave the site as you find it.

Best regards,
Peter

[David]

Hi there,

can you disable any cache / optimization plugins – then enable Flex and clear your browser caches. Does the issue persist ?

[moderndev]

That had no effect and I even tried with the my child theme disabled to ensure that none of my custom CSS was to blame

[David]

Try this CSS:

.site-content {
    flex-wrap: wrap;
}
.wooarchive {
    flex: 1 0 100%;
}

[moderndev]

So to be clear I just add the css and turn the flexbox setting on?

I did that and it caused a different issue.

I have left the css live so you can see what I mean if you use the login I gave you.

[David]

Just to be clear – its resolved the Desktop layout ? Correct ?

Whats the other issue – sorry need more coffee 🙂

[moderndev]

No nothing is solved. Still cannot use the flexbox

[moderndev]

Yes, more coffee 🙂

[Tom]

The issue seems to be where you’ve placed the wooarchive element.

Instead of there, try adding it as a Hook Element in the generate_before_main_content hook: https://docs.generatepress.com/article/hooks-element-overview/

That should also prevent you from needing a custom WooCommerce template in your child theme.

[moderndev]

I am having issues implementing this correctly. Are you able to see what I have done wrong?

[Tom]

You’ve added an element in your child theme that looks like this:

<div class="wooarchive">
   ...
</div>

You should remove that, and add it as a Hook Element to the generate_before_main_content hook.

Right now it’s added inside a flex element, which is why the layout is wrong.

[Author]

Posts