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