Title: hover over image
Last modified: August 24, 2016

---

# hover over image

 *  Resolved [hemingwayscatboutique](https://wordpress.org/support/users/hemingwayscatboutique/)
 * (@hemingwayscatboutique)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-over-image/)
 * Hello!
    I just downloaded your plugin yesterday and love how simple it is. It
   works wonderful with my woocommerce site and the pop up shopping cart I have 
   installed. My question is I would love to have rather than a button a quick view
   hover over image? Is that possible. My website is hemingwayscatboutique.com
 * Thanks for your help.
 * [https://wordpress.org/plugins/formula04-woocommerce-quick-window/](https://wordpress.org/plugins/formula04-woocommerce-quick-window/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [Verb_Form04](https://wordpress.org/support/users/verb_form04/)
 * (@verb_form04)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-over-image/#post-6086461)
 * Thank you for you feedback. I am glad you are finding it useful. Please describe
   to me exactly how you see this Hover Image working so I make sure I understand
   correctly.
 * As of right meow, there is a link **a.quick_button** that when clicked on launches
   the quick view. You can style this by adding a background image, or other css
   to change the look.
 * But you are saying that you want that
    `<a class = "quick_button button"></a>`
   to be `<img class = "quick_button button" />` instead? You also want the quick
   window to launch when the quick_button is hovered?
 * Once again, I am not sure if I understand exactly what you are asking for. Please
   let me know and I will see what I can do!
 *  Thread Starter [hemingwayscatboutique](https://wordpress.org/support/users/hemingwayscatboutique/)
 * (@hemingwayscatboutique)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-over-image/#post-6086467)
 * Hello and thank you for your reply!
 * Probably the best way to describe this is to give you a website as an example.
   
   This website has the quick hover over the image rather than the button? Website
   is colorfulcritters.com Is that something that can be done with this plugin? 
   Thanks again..
 *  Thread Starter [hemingwayscatboutique](https://wordpress.org/support/users/hemingwayscatboutique/)
 * (@hemingwayscatboutique)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-over-image/#post-6086483)
 * I would really love to use this plugin but I need it to show the quick view over
   the image rather than as a button? Also, when I activated the plugin last night
   to test it out the pop up will not close when clicking on the x in the right 
   corner! Please advise as soon as you can..
 * Thank you.
    my url is hemingwayscatboutique.com
 *  Plugin Author [Verb_Form04](https://wordpress.org/support/users/verb_form04/)
 * (@verb_form04)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-over-image/#post-6086484)
 * Greetings, thank-you for clarifying! Currently there is only one default location
   for the button. Maybe I will look at adding some more default locations in the
   future.
 * **Your Issue **
    1. You want to change the appearance of the quick-view button and where the quick-
       view button shows up on the front-end.
    2. You do not want the quick-view button to show by default; instead you would 
       like for the button to show when a product image is hovered over.
 * Currently you would need to:
    1.  > Make sure to uncheck **“Auto Display Quick View Button”** in the Formula04
        > Quick Window Settings screen.
    2.  This will prevent the button from showing up automatically in the front end
        you will need to add the code manually where you want it to appear.
    3.  > Insert shortcode into your template
    4.  This can be done a bunch of different ways. One way would to be to find the
        template that is generating the html for the place you would like the button
        to appear. This will be different files for different people. In your case 
        you need to find the file that is generating the HTML for for your product 
        images.
    5.  so if you found generic_template_file.php and it contained this code.
    6.      ```
            <a href="yoursite.com/visit_detail_page">
            <img src="yoursite.com/link_to_product_image.jpg" />
            </a>
            ```
        
    7.  You might try changing it to
    8.      ```
            <a class="link_to_my_product" href="yoursite.com/visit_detail_page">
        
            <?php echo do_shortcode(  "[  form04wooquickwindow  product_id=”PRODUCT_ID_HERE″ button_text=”CLICK ME” class=”SomeCssClass”  ]"  ); ?>
        
            <img src="yoursite.com/link_to_product_image.jpg" />
            </a>
            ```
        
    9.  You need to fill in the **PRODUCT_ID_HERE** dynamically depending on your template.
        in most cases **get_the_ID()** should work.
    10. > Use Css and or JavaScript to determine the behavior of your button.
    11.  Now that are button is showing up where we want it on the front end we would
        use the CSS to style it.
    12.     ```
            <style type="text/css">
        
            .SomeCssClass{
            display:NONE;
            }
        
            .link_to_my_product:HOVER .SomeCssClass{
            display:BLOCK;
            }
            </style>
            ```
        
    13. This will only show the button the image is hovered over. Obviously you would
        want to further style it to match up with whatever the theme of your template
        is; this is just an overview of how to get it done.
 *  Thread Starter [hemingwayscatboutique](https://wordpress.org/support/users/hemingwayscatboutique/)
 * (@hemingwayscatboutique)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-over-image/#post-6086485)
 * Wow thank you so much! I will start working on this today and let you know if
   I have any questions.
 * One more thing, do you know what might be preventing the x when clicking on it
   from not closing the pop up?
 * Thanks again! You are the best!
 *  Plugin Author [Verb_Form04](https://wordpress.org/support/users/verb_form04/)
 * (@verb_form04)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/hover-over-image/#post-6086486)
 * > One more thing, do you know what might be preventing the x when clicking on
   > it from not closing the pop up?
 * It would be hard for me to tell without actually seeing it setup on your site.
   If you run into this issue again please post the link. If it is a bug or something
   we can definitely open a new support topic
 *  [vinit sharma](https://wordpress.org/support/users/vinit-sharma/)
 * (@vinit-sharma)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/hover-over-image/#post-6086532)
 * how can i remove quick button and see quick view on click product image

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘hover over image’ is closed to new replies.

 * ![](https://ps.w.org/formula04-woocommerce-quick-window/assets/icon-256x256.png?
   rev=1027506)
 * [Formula04 WooCommerce Quick Window](https://wordpress.org/plugins/formula04-woocommerce-quick-window/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/formula04-woocommerce-quick-window/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/formula04-woocommerce-quick-window/)
 * [Active Topics](https://wordpress.org/support/plugin/formula04-woocommerce-quick-window/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/formula04-woocommerce-quick-window/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/formula04-woocommerce-quick-window/reviews/)

 * 7 replies
 * 3 participants
 * Last reply from: [vinit sharma](https://wordpress.org/support/users/vinit-sharma/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/hover-over-image/#post-6086532)
 * Status: resolved