Woocommerce product archive not working with new flexbox

Hi there,

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

Let me know :)

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/

Hi there,

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

Let us know :)

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

Hi there,

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

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

Try this CSS:

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

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.

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

Whats the other issue - sorry need more coffee :)

No nothing is solved. Still cannot use the flexbox

Yes, more coffee :)

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.

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

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.