The Grid - Embedded in Tabs

[j300bac]

Howdy Pro!

So I have “THE GRID” featuring certain Woocommerce products based in certain tabs using global blocks. Loving the global blocks by the way - changed the entire game!!

The Grid is working as expected - works perfectly when testing and the first grid in the first tab shows up great. No plugin conflicts no caching issues - tried disabling it all - everything perfect.

Only problem is when navigating to the next tab the Grid isn’t loading at all. Loads on the first one but not the 2nd one. Should be a little PacMan dude chomping away on load but he’s nowhere to be seen

Can you errr help me find PacMan I suppose? Gotta figure out a work around… Essential grid used to be my chosen plugin for this stuff but they no longer support Woocommerce in the Pro extension version anymore along with some other skins.

Anyway to force the Grid to load across the board? I’ve messed around with all of the usual settings that I use i.e javascript in footer, internal lazy load…etc.

I’ll leave the URL in the secure note just to see if there’s anything obvious that you may be able to help with at all?

Thank youuu
J

SLIGHT UPDATE: Have switched off “Include The Grid library globally” and PACMan is back but the items still aren’t loading.
Change the first tab to be different from the other tabs as an experiment too. FYI - by right clicking on the tabs and inspecting element the products show but something is blocking them. Also the logo in my header has blown up beyond the size now - definitely some problems going down here.

[ruenel]

Hello @j300bac,

Thanks for writing in!

Please be advised that it is not recommended to insert the grid inside a tab element or accordion element. Please understand that the grid element needs to initialize upon page loading in order to display the grid items properly. When it is inserted inside a tab element or accordion element especially if the tab element item is not active, the grid element cannot initialize which is what is happening in your page.

Hope this explains it briefly.

[j300bac]

Ah ok that’s a shame as Elementor Pro has this function built in… I’ll have to find a widget that can display individual categories I suppose and embed them in there instead.

Thanks anyways

[ruenel]

You are most welcome!
If you need anything else we can help you with, don’t hesitate to open another thread.

[j300bac]

Hey RueNel,

Managed to just use The Grid instead and make it look like the tabs I had before. Used CSS to change the background colour of the product filters as you can see.

But for some reason my CSS isn’t working to change The Grid filter:
font-color
font-size
and green background padding

Could you throw me a hint or 3 please to style the filter?

Thanks
J

[jade]

Hey J,

Please try this code:

#grid-14347 .tg-filters-holder .tg-filter .tg-nav-color {
    color: #fff;
    font-size: 15px;
    padding: 0 5px;
    margin: 5px;
    background-color: green;
}

#grid-14347 .tg-filters-holder .tg-filter {
    margin: 0;
}

In case the code does not work, try adding the !important keyword in each CSS value.

For example margin: 0 !important;

Hope this helps.

[j300bac]

You’re amazing Jade! Thanks for this

[friech]

You’re welcome, glad we could help.

Cheers!