I want me to move the product info (name, price) from under each Woocommerce product image on the shop page to only be seen via Featured Image Rollover (instead of the current rollover info.) Pretty sure this will require custom CSS and JS, which i am fine with, I am just hoping for any pointers on methods / tips, etc for where to start.

Screenshots below of current view first, and then a different site who has this functionality that i want to create (I also realize this reference site is not WordPress. But i can see this is doable!)

I am using Avada theme, which has options for the rollover but none i can see which can do this customization. Avada's Featured Image Rollover options page

thanks! Please let me know if i need to clarify at all!

current page with product info below current page with product info below

Reference page with hover active and resulting info visivle reference page with active hover info

  • 1
    post a sample of html & css for one product – RiddleMeThis Dec 18 '18 at 15:37

Add following code to css

.product-details {
    position: absolute;
    top: 15px;
    z-index: 999;
    display: none;

.product:hover .product-details {
    display: block;
  • this isn't going to work – RiddleMeThis Dec 18 '18 at 16:51
  • just try.. i think for theme avada its enough – Jaisemon Jacob Dec 21 '18 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.