Woocommerce Hover on thumbs WordPress
- SOLVED
Hi People,
I am trying to add an hover effect on woocommerce store. What I want to achieve is when users hovers over thumbnail, main product changes to thumbnail that has been hovered.
I have been trying this with the following jquery-
<code>
jQuery(document).on('hover','.thumbnails .zoom', function(){
var full_img = jQuery(this).attr('href');
jQuery('.woocommerce-main-image img').attr('src', full_img);
});<code>
I think the problem is the ".woo-commerce-main-img" bit because the theme Im using doesn't look to have this class.
here is the URL: rafieyewear*com/product/rafi-301-brown/ (forgive the astrix)
If anyone could assist, much appreciated.
Thanks
Answers (2)
timDesain Nanang answers:
put this code in the theme's functions.php (and no need to edit the others file)
add_action('wp_footer', 'wpq_wp_footer');
function wpq_wp_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product-slider-pagination li').hover(function(){
var idx = jQuery(this).index();
var cld = jQuery(this).parent().parent().children('.slides').children();
cld.hide();
cld.eq(idx).show();
});
});
</script>
<?php
}
if your website have no jQuery error, it should be working.
Carl Brook comments:
Hi timDesain Nanang,
The code doesn't work if I put that in the functions file, is it because of the "PHP" tags, also the "add_action" text you have there just outputs text on the page.
Can you point me in the right direction from their? I can see you seem to have got that working which is great.
Carl
timDesain Nanang comments:
i see, how about this:
<?php
add_action('wp_footer', 'wpq_wp_footer');
function wpq_wp_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product-slider-pagination li').hover(function(){
var idx = jQuery(this).index();
var cld = jQuery(this).parent().parent().children('.slides').children();
cld.hide();
cld.eq(idx).show();
});
});
</script>
<?php
}
?>
Carl Brook comments:
It's OK, I have just added that directly to the footer file :)
working
Thanks Guys!
timDesain Nanang comments:
You are welcome.
Yep, You can put the script in the footer directly.
Arnav Joy answers:
there is connection error with db in your site.
Carl Brook comments:
Hi Arnav,
Must have been temp, it's ok here! Please try again.
Thanks
Carl
Arnav Joy comments:
you can use .single-product-image class for it.
Carl Brook comments:
Hi Arnav,
That's what I thought! I have tried this within the jquery bit, added that to the "theme.js" folder and it's not working :(
Carl Brook comments:
OK, I just placed it back in... jquery now looks like this.
jQuery(document).on('hover','.thumbnails .zoom', function(){
var photo_fullsize = jQuery(this).attr('href');
jQuery('.single-product-image img').attr('src', photo_fullsize);
});