Ask your WordPress questions! Pay money and get answers fast! (more info)

Woocommerce clicking on thumbnail replaces main product image WordPress

  • SOLVED

By default on a Woocommerce product page, there is a main product image and thumbnails underneath. When a thumbnail is clicked, the image opens up into a lightbox. Instead I want it to replace the main image with a larger version of the thumbnail for each thumbnails that gets clicked.

I have seen several tutorials online with some jquery, but none of them seem to work on my site.

I am building my Wordpress site using the Genesis framework and specifically Dynamik Website Builder as a child theme. This builder might have some specific differences that makes code that normally work on regular Wordpress sites not work.

Is there anyone familiar with Dynamik Website Builder that can help me with this functionality?

Answers (2)

2016-04-08

Reigel Gallarde answers:

try adding this to your functions.php

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'reigel_woocommerce_single_product_image_html' );
function reigel_woocommerce_single_product_image_html( $image_html ) {
$image_html = str_replace( 'data-rel', 'data-rel2', $image_html );
$image_html = str_replace( 'zoom', '', $image_html );
return $image_html;
}

add_action( 'wp_footer', 'reigel_replace_main_product_image', 99 );
function reigel_replace_main_product_image(){
?>
<script>
jQuery(function($) {
$(document.body).on('click', '.has-post-thumbnail .images .thumbnails a', function(e){
e.preventDefault();
var url_obj = {},
srcset = $(this).find('img')[0].srcset;
srcset.split(", ").map(function(val){
tmp = val.split(" ");
url_obj[tmp[1]] = tmp[0];
return val;
})
$(this).closest('.images').find('.woocommerce-main-image > img').attr('src', url_obj['600w']).attr('srcset', srcset);
});
});
</script>
<?php
}


elogichick comments:

Thank you so much Reigel, that code worked like a charm


Reigel Gallarde comments:

don't forget to close this question by clicking [[LINK href="http://wpquestions.com/question/pickAWinner/id/17564"]]Vote to award prize[[/LINK]].

2016-04-07

Andrea P answers:

hello!

could you share those tutorials?
I think you have probably done something wrong when implementing them. it is easy to fail with jquery/js on wordpress, as the scripts needs to be loaded properly, they need the proper dependencies and also the syntax must be jQuery() rather than $()


elogichick comments:

For instance, the same question was already asked on this site.

http://wpquestions.com/question/showChronoLoggedIn/id/10399

The jquery code in the middle is the one that I see most often in tutorials, but from the ones that I tried, they either did nothing upon clicking the thumbnail or they opened in a new tab.