CODEWITHSUNDEEP
jquerywordpresswoocommerce
Stevie
Stevie

Reputation: 199

Woocommerce Having Trouble Loading Thumbnail as Main Product Image

I'm trying to accomplish the following task: when a user clicks a thumbnail, that image is loaded and replaces the main product image. I'm using the default WooCommerce template to display product images (I believe the only modification is removing the link on the main product image in product-image.php).

However, when the user clicks, the large image does not load correctly. Strangely...when you inspect the source closely, the img src has the correct image URL but is not displaying the image. Not sure why this is happening!

Here's an example site: http://www.cchcollection.com.php54-5.ord1-1.websitetestlink.com/product/kenan-jacket

And the jQuery I'm using (the logic is - grab the thumbnail's URL, replace its size with the correct size in the string, then replace the src of the main image with that new URL).

jQuery(document).on('click','.thumbnails .zoom', function(){
    var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-76x88','-540x623');

    jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
    return false;
});

I'm happy to provide more code/details/accept another solution that requires less engineering. Thank you!

Upvotes: 1

Views: 1082

Answers (3)

Dyslexic Advantage
Dyslexic Advantage

Reputation: 21

In my situation, the problem was due to not setting the product to be public no matter what.

I just checked the box, and the thumbnails appeared. No coding!

"Check this box if you want to force this product to be public regardless of any restriction rules that may apply now or in the future."

It's below the product descriptions under memberships.

Upvotes: 2

Stevie
Stevie

Reputation: 199

My problem was caused by a conflict between the new WooCommerce version and a plugin I was running to make the variation images display as swatches. I updated the plug-in and everything works fine now.

Upvotes: 0

Yehuda Schwartz
Yehuda Schwartz

Reputation: 3503

in the console it says GET http://www.cchcollection.com.php54-5.ord1-1.websitetestlink.com/product/false 404 (Not Found) skip the return false part.

jQuery(document).on('click','.thumbnails .zoom', function(){
    var photo_fullsize = jQuery(this).find('img').attr('src').replace('-76x88','-540x623');
    jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
});

Upvotes: 0

Related Questions