Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)

2014-08-21

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.

2014-08-21

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);
});