[Resolved] woocommerce shortcode columns

[drew]

Hi guys, running into some issues with the default woocommerce category shortcodes in that the column attributes aren’t pushing through to the front end.

The page URL is below and here’s the WC shortcode used:
[product_category category="ikebana" per_page="20" columns="4" orderby="name" order="desc"]

The output looks like this: https://www.screencast.com/t/wDaeZVdTHM

I did find Tom’s reply to a similar question, here: https://generatepress.com/forums/topic/woocommerce-equal-height-in-grid-view/#post-858862

So I gave that CSS a try:

ul.products.columns-4 {
    display: flex;
    flex-wrap: wrap;
}

But that still produces funky results: https://www.screencast.com/t/OrE0f8gxuNF8 – the columns are displayed as 3 instead of 4 as indicated in the shortcode attribute. Add to that, there’s no padding or margins.

Is this a known bug, issue, etc.? Or is there any other solution to try here?

Many thanks,
Drew

[Leo]

Hi there,

Can you guide me to a page where I can see the issue?

Also please disable any caching plugins for now if you are using them.

Thanks 🙂

[drew]

Sorry, that should have come through in the admin only URL field, but here it is otherwise: http://morikamidev.wpengine.com/classes/ikebana-ikenobo-class/

And I just purged that WPEngine cache.

[Tom]

It looks like the CSS they provide isn’t coming through, likely because the shortcode is in a Section and they’re only looking for it in the main content area.

Try adding this CSS:

.products.columns-4 > li {
    width: 25%;
}

[drew]

Many thanks, I tried that earlier as well and here’s what I end up with: https://www.screencast.com/t/C1xXuJv1SiD

If it’s potentially a thing with sections, is there a snippet based solution that will iron this out (I’m planning on using those category based shortcodes extensively through this site)?

Also, I’ve noticed the “Add to Cart” buttons aren’t functioning properly. Should I post that in a separate support thread?

[Tom]

Does it work if you add it to the regular editor instead of Sections?

[drew]

Good question! I deactivated sections and the issue persists. Right now, the page is currently without sections and is applying the following CSS:

.products.columns-4 > li {
    width: 25%;
}

When that CSS is removed, the issue reverts back to the original problem where the default woocommerce shortcode columns were not being applied properly.

[Tom]

So that means something is stopping WooCommerce from outputting their CSS files. Can you deactivate your other plugins one by one to check for conflicts?

[drew]

FYI, we did find the conflict: it’s with Perfmatters. I’ll reach out to those guys and see about finding a fix. Thanks so much (as I always hate to be “that guy” who brings a problem to the wrong support board).

[Tom]

Glad you found the conflict! They’re awesome, it should be an easy fix 🙂

[Author]

Posts