[The Grid+Woocommerce] Add category thumbnail element to skin layout

[pandinsky]

Nothing as simple as the object says. But I really can’t do it

I’m using The Grid to arrange Woocommerce products on a page and I’m stuck on the skin layout editor’s page because I can’t put the woocommerce product’s category icon/thumbnail inside.

I have a product (1)
Which is in a category (X)
The (X) category has a thumbnail image

And I can’t find an element, even inside the woocommerce dropdown menu elements to set it up.

Any idea?

[ruenel]

Hello @snowtura,

Thanks for writing in!

Regretfully you cannot add a WooCommerce product category icon or thumbnail. You can only place the term list of the Post Data.

• 

You may check out Essential Grid because you may have more controls over the elements.

• 

Hope this helps. Please let us know how it goes.

[pandinsky]

Thanks! I’ll try with Essential Grid.

[pandinsky]

Hi again @ruenel

I did try to replicate the skin I was working on with The Grid.
I started from one of the default skins that had text visible on idle and fading away on cover hover, and another text fades in.

I really can’t set a text on idle that fades out on cover hover. And I couldn’t find any documentation on that. I feel the solution is somewhere easy but I can’t reach it.

Any help?
Thanks in advance

[lely]

Hi @snowtura

@snowtura

I really can’t set a text on idle that fades out on cover hover.

Do you mean for the text to stay even on cover hover? For us to be direct on our recommendation, can you share which skin have you started using? Share the exact page url with grid then let us know which text you have issues and how exactly you it to behave. Thank you.

[pandinsky]

Thanks @lely

This is how I was building it with The Grid. Of course there’s no category icon I was asking about at the beginning of the thread. The only important thing missing there is that the whole block should be clickable and make react the content as hover.

https://www.strategaconsulting.eu/e-shop/

I’d try to replicate something similar on Essential Grid. I did find this skin and edited on The Grid but I still can’t really understand how the skin editor works for idle and hover states with content.

Thanks
Alessandro

[lely]

Hello Alessandro,

I thought what you have is already essential grid and that where you’re having issues.

@snowtura

The only important thing missing there is that the whole block should be clickable and make react the content as hover.

Here’s your detailed guide for the grid:
https://theme-one.com/docs/the-grid/

You can check the APIA skin. The whole block is clickable using that skin. Although, this specific skin is not available for editing. It’s structure is different. Unfortunately, THE GRID is more limited on its skin editor.

@snowtura

I’d try to replicate something similar on Essential Grid. I did find this skin and edited on The Grid but I still can’t really understand how the skin editor works for idle and hover states with content.

Here’s the detailed guide for essential grid editor:
https://www.themepunch.com/essgrid-doc/item-skin-editor/

Please try it using essential grid. Option to make the entire block clickable is available by default. Once you tried and then you have specific question, post the URL with EG grid and let us know what’s the issue.

[pandinsky]

Sorry @lely
My fault explaining myself

I need to use Essential Grid because it makes me add woocommerce metadata to the block.

Problem is that I already did a skin with The Grid so now I need to do it the same on EG. Problem is also that in TheGrid I started from one of the default skins and edited, but there’s no skin in EG that has text on the cover when in idle status, so I don’t have an example to analyze and understand.

Then I start a new skin on EG from scratch and I add a new text element, but it will only appear on hover status. Or in idle and hover (always) if I set it to show it always.

I.e.
I need to set something like:

• when in idle status -> text_1 alpha is 100% & text_2 alpha is 0%
• when mouse roll over cover -> text_1 alpha is 0% & text_2 alpha is 100%

I did read the documentation but couldn’t find a solution to this. Or I missed it or I couldn’t get it. I’m stuck on this page because of EG and this is getting frustrating

[rad]

Hi Allessandro,

The text layer has idle and hover styling in which you can utilize, then simply change the color transparency to your preference. Like in this screenshot

Is that what you’re trying to achieve? Unfortunately, it’s only limited to those features.

Thanks!

[pandinsky]

Hi @rad

I’ve done this too. The transition happens only when the mouse cursor goes over the text, not over the entire box.
And even if an animation is set, after I change idle and hover color alpha, the text just blips away.
In Layout Composition I have Cover Type as Full and Link to Cover. But even if I change those settings, nothing changes with the box behaviour.

[ruenel]

Hello @snowtura,

In the Layout Composition, please hide the content so that when you hover over the box, the text layers will the display.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Best Regards.

[pandinsky]

Hi @ruenel . Thanks for your concern and help.
Unfortunately that content setting was already set on “hidden”.

I’ll add a secure note with the informations. Thanks to all of you.

Ale

[ruenel]

Hello Ale,

The property of the text is independent from the box. If you want to change the color of the text while hovering the entire box, there is not setting for it. This is the limitation of the editor. You can just add a custom css so that when the box is hovered the color will change. You can make use of this example code:

.eg-stratega-product-wrapper:hover .eg-stratega-product-element-1 {
    color: red;
}

Hope this helps.

[pandinsky]

Hi

so, you can confirm that I can’t replicate the skin I did in The Grid (https://www.strategaconsulting.eu/e-shop/) with Essential Grid without css coding? Just to be sure before I decide what to do.

If so, with The Grid, I’ve seen from here (https://theme-one.com/docs/the-grid/#element_metadata) that it’s possible to put an element containing a metadata from the post. But how can I set and name the category image metadata to put it the box?
The only reason I had to switch to Essential Grid was that The Grid can’t handle a category image in the skin, and I really need to set it.

This is what I need to make (referring to the page link before):

Any idea on how to reach this result?
Thanks

[lely]

Hi @snowtura,

@snowtura

so, you can confirm that I can’t replicate the skin I did in The Grid (https://www.strategaconsulting.eu/e-shop/) with Essential Grid without css coding? Just to be sure before I decide what to do.

Yes, custom CSS is needed.

@snowtura

But how can I set and name the category image metadata to put it the box?

Go to Global Settings > Meta Data tab

@snowtura

Any idea on how to reach this result?

If it is not possible with the settings, custom CSS is needed.

[pandinsky]

Hi @lely

thanks for your help. everything seems clearer now.
I only have one last question, about Meta Data tab.
I couldn’t find anything in the documentation about how to use the meta data. Any suggestions or other documentation source?
Unfortunately, the ticketing service on The Grid developer website is only for those who bought it and not have it bundled with themes and they don’t seem to have a board like this.

I really don’t understand how to use the Meta Data system with The Grid.

[nabeel]

Hey @snowtura,

You’re right, i looked around and not much help can be found regarding the Meta Data. However according to their documentation here https://theme-one.com/docs/the-grid/#element_metadata there are 2 ways to add metadata content:

• In Source > Post Data and MetaData
• In Source > Text/HTML

I tested the first one and it works as expected, In the skin editor (see https://www.youtube.com/watch?v=CemceZL2UGg), simply add a Meta Data key e.g CategoryTitle In Source > Post Data and MetaData (see screenshot)

Now go to each of your posts and add a custom field with the same Key i.e CategoryTitle (please see https://wordpress.org/support/article/custom-fields/)

Now when you’ll use this custom skin, the value of the key CategoryTitle will be pulled from the post’s custom field and displayed on the Grid.

Hope this explains!

[pandinsky]

That’s my man!

The fact I was missing was that I should set the metadata in each post and not on the category entity.
I’ll try this today, but I’m quite sure it’s gonna solve my problem. Then I’ll give you a feedback to positively close this thread.

Thanks for your help, all of you.

Cheers

[jade]

You’re most welcome, Alessandro.

[pandinsky]

Easy as it was explained.
Everything worked fine for adding image from custom field to The Grid skin layout.

Thanks folks.