Phoenix - Your AI AssistantFix custom themed WooCommerce Gallery
- Posted:
- Proposals: 50
- Remote
- #4122070
- Awarded
Singapore 
Description
Experience Level: Expert
I have a site that I'm building on WordPress. It's got a Woocommerce store but I'm having issues with the product gallery. When I click the gallery image it doesn't load that image in the main image space.
You can see what I mean here - https://wbs.mhwddev.co.uk/product/bsc3/
I've tried with the following code but it doesn't seem to work.
jQuery(document).ready(function($) {
$('.woocommerce-product-gallery__wrapper').on('click', 'a', function(e) {
e.preventDefault();
var imageUrl = $(this).find('img').attr('data-src');
console.log(imageUrl);
$('#main-image img').attr('src', imageUrl);
});
});
You can see what I mean here - https://wbs.mhwddev.co.uk/product/bsc3/
I've tried with the following code but it doesn't seem to work.
jQuery(document).ready(function($) {
$('.woocommerce-product-gallery__wrapper').on('click', 'a', function(e) {
e.preventDefault();
var imageUrl = $(this).find('img').attr('data-src');
console.log(imageUrl);
$('#main-image img').attr('src', imageUrl);
});
});
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
Hi Michael,
Have you managed to resolve this now?
As the other developer has pointed out, it's not the best code implementation to be honest as it won't change the responsive image HTML code.
Is there a particular reason why you decided to not just use the default WooCommerce gallery and just disable the features of the gallery that you didn't want...? Ie. zoom etc.?
Kind regards,
Matthew -
Hello Michael,
Have you tried any better gallery plugins for this? I have checked the js you are using and only changed the src but the image tag has srcset which defines different image formats for different screen sizes.