hover over image

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!

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..

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

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.

   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.

2. Insert shortcode into your template

   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.

so if you found generic_template_file.php and it contained this code.

<a href="yoursite.com/visit_detail_page">
<img src="yoursite.com/link_to_product_image.jpg" />
</a>

You might try changing it to

<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>

You need to fill in the PRODUCT_ID_HERE dynamically depending on your template. in most cases get_the_ID() should work.

3. Use Css and or JavaScript to determine the behavior of your button.

   Now that are button is showing up where we want it on the front end we would use the CSS to style it.

   <style type="text/css">
   
   .SomeCssClass{
   display:NONE;
   }
   
   .link_to_my_product:HOVER .SomeCssClass{
   display:BLOCK;
   }
   </style>

   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.

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!

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

how can i remove quick button and see quick view on click product image