Skip Navigation

[Resolved] Woocommerce – Show custom fields on hover image

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to include product images on my site. When the User mouses over a product image, I would like to show an overlay with some custom field information.

Solution: The Classifieds reference site includes a similar hover effect on the homepage. You can create your own test site at discover-wp.com to see how this is configured. Edit the View "Ads list - featured slider" to see the View setup, and the template "Loop item in Ads list" to see the markup. Check the CSS panel of this template to see how the hover effect is achieved.

Relevant Documentation:
discover-wp.com

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by rolandP 6 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#616416

Hi,

I have question.
If you can go to page: hidden link . gl/nU3nBM
On product list hover image that you see custom fields hidden link
Go to product page that you see same custom fields.
Can be done in WP types ? If yes. How I can start?

many thanks

#616506

Hi, there is a reference site available at discover-wp.com that has a similar effect on the homepage:
hidden link
When you mouse over each image, more information is displayed. If you'd like to see how this is set up, feel free to create your own site at discover-wp.com and install the classifieds reference site. You will be able to see how this type of effect is implemented if you edit the View "Ads list - featured slider". In the template "Loop item in Ads list – featured slider" you can find the markup, and in the CSS panel you can find the CSS.

#616788

Hi,

Yes, that's what I need, thank you very much.

best regards