Welcome to Rise Forums

Join our fantastic community to connect with like-minded website owners, WordPress users, and online entrepreneurs.

[dev idea] Plug-in (or code) for product info on hover?

Discussion in 'Design & Development' started by Adrasteia, May 15, 2014.

Thread Status:
Not open for further replies.
  1. As I'm redesigning my website, I thought it would be nice to make the store pages completely visual-based, meaning that only images of the items would be visible. Then when one would hover on these images, the product name, brand name, price and number of available colors would appear (sort of like here, but better executed).

    Now, for my website I use WordPress with Elegant Themes' Divi and WooCommerce. I have searched and searched for a plug-in that can do what I described (although a code would be fine, too, but a plug-in would just be easier), but so far without success. Does someone here know how to achieve what I'm looking for? Or, even better, is there a plug-in developer who thinks this is a great idea (I'm sure a plug-in like this would sell well), and would like to create one? Any and all advise is appreciated.. I have found quick view plug-ins that produce a pop-up, I've seen one that flips the image to another image, but not product info..
     
  2. It doesn't require a plugin ;) Pure CSS will do the work. Check how they used it here and try hiding all elements via CSS and make them visible on hover. It may require digging a little bit into template if repositioning with CSS won't work.
     
  3. Thank you for your response, Kris. However, I cannot write code. I can go as for as copying and pasting a code in the right place when someone tells me to, but that's it.. so sadly pure CSS won't work for me, unless someone can assist me with getting it right.

     
  4. Send me link to your website and we'll see what's possible with pure css.
     
  5. The website I'm working on can be found here Chris, thank you in advance. However, because I don't know if this will influence what code is needed, it's probably worth saying that I may be changing the size of the thumbnails. I'd be most grateful for any help. I wish I was just in the position to hire an expert, but I'm not.. though for someone who can help me and is looking for freelance work, I may have some most interesting contacts *wink*.

     
  6. Send me login on PM ;) I think I'll be able to do this.
     
  7. I have a free account here Kris, so I cannot use the Personal Message system. I've looked at your website but couldn't find an e-mail address.. so what would be the best way to reach you? Could send you a message on Facebook, perhaps?

     
  8. E-mailed. Looking forward to hearing from you.

     
  9. Ok, to be clear we got it ;) but not 100% clean here is test site: http://test.easyfertilize.com/wp/?post_type=product

    I modified 1 woocommerce file to put custom attributes (in the example it's the 5 colors available and Lincoln), used this css to make it working:
    Code:
    .et_overlay {
        background: rgba(255, 255, 235, 0.1); /* overlay background color */
        border: none; /* border style */
    }
    .et_shop_image .et_overlay:before, .et_portfolio_image .et_overlay:before{
        color: #FFF !important; /* + icon color */
    }
    .et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1; } /* overlay opacity */
    
    .et_overlay:before {
    content:none !important;
    }
    
    .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del  { color: #666!important; font-size: 14px!important; font-weight: bold; margin: 0!important; }
    
    .kris-overlay {
        padding-left: 19px;
        margin:1rem;
        position: relative;
        top: -175px;
       display:none;
      background:white;
    }
    .et_shop_image:hover + .kris-overlay {
       display:block;
    }
    .kris-meta {
    font-size:10px;
    }
    .kris-brand {
    font-style:italic;
    }
    Where is the problem, I can't figure out how to put the 'kris-overlay' box with title, price, attributes over the overlay. Using z-index makes it 'jumping'. Any help would be appreciated.
     
    Kevin Muldoon likes this.
Thread Status:
Not open for further replies.

Share This Page