Quickview on thumbnail

luckygoseven
(@luckygoseven)

6 years ago

Instead of clicking on the small black hover bar that says “Quick view”, I would like to press anywhere on the thumbnail to trigger quick view. How do I do this?

I really hope someone here can help me out 🙂

The page I need help with: [log in to see the link]

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

Amit Singh
(@apprimit)

6 years ago
Hello,

1. Please add the below code to the Customize > Custom CSS/JS – Custom JS field –
```
$(document).ready(function(){
  $('.image-wrap').each( function(){
   $(".woo-entry-image").addClass("owp-quick-view");
  });
});
```
2. Now add the below code to the Customize > Custom CSS/JS – Custom CSS field –
```
.woo-entry-image.owp-quick-view {
    position: relative;
    opacity: 1;
    visibility: visible;
}
```
Publish the changes, clear cache, and reload the site. Let me know it works or not.
shayed
(@shayed)

6 years ago

Hi amit singh Can u help me with another big issue? i am in problem with search bar. I have installed smart woocommerce search. It works on every page other than home page. Can you help me? i am using oceanwp.

Thread Starter luckygoseven
(@luckygoseven)

6 years ago

@apprimit Thanks for your response!
So I add both to a: Custom JS field ?

So far I can’t get it to work.
I tried adding 1. To JS field and 2. To a CSS field, using the (Simple Custom CSS and JS) plugin.

I’m using the plugin because under customize I can only find Additional CSS.
Would love to know what I’m doing wrong.
Amit Singh
(@apprimit)

6 years ago
@luckygoseven Yes, you can use the simple css and js plugin. Add the js code in js field and css code in the css field.

For the custom section, if you have enabled ocean extra, you can see it under the Customize > Custom CSS/JS section after scrolling down the panel.

For the js try this with the script. No need to use script tag if you will add the code in the customize – custom js section –
```
<script>
$(document).ready(function(){
  $('.image-wrap').each( function(){
   $(".woo-entry-image").addClass("owp-quick-view");
  });
});
</script>
```
@shayed can you share your site link? Have you tested it with the other theme like twenty-twenty?
- This reply was modified 6 years ago by Amit Singh.
shayed
(@shayed)

6 years ago

@apprimit thank you. I am using oceanwp for my online food delivery business. Oceanwp is better than twenty twenty. Here is my website address kroybook.com/food. Please help out.