Docs

[fmagina]

Hi There,

There is any possibility to change the type of galery visualization in product page?
My wishe is when select a image listed on product galery the first big one product image change instead of opening a box. there’s any configuration I can manage? or maybe just lock the first one (product image) for not opening in lightbox because it is small sized and it gets strange visualization compared with the other products image in galery. thanks

other thing.. can you help me to configure the size of thumbnails in product galery (product shop page)?

thanks again
best wishes

[Rue Nel]

Hello There,

Thanks for writing in! To properly set up your product and its images, please check out the documentation here:
https://docs.woocommerce.com/document/adding-product-images-and-galleries/

To learn more how to use the Appropriate Product Image Dimensions, please check it here: http://docs.woocommerce.com/document/using-the-appropriate-product-image-dimensions/

In X, these defaults were removed on purpose. To be able to restore these defaults, please check out this topic: https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

And to be able to have the idea that when you select a image listed on product gallery, the first big one product image change instead of opening a box, this would need a customization. Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(".thumbnails > a").each(function(){
    $(this).on('click', function(evt){
      evt.preventDefault();
      var image = $(this).find('img').attr('src');
      console.log(image);
      $(".images > a").find('img').attr('src', image );
    });
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[fmagina]

Hello,

Thanks for the answer, the resize of product galery worked fine. But the JS didnt worked. It keeps opening in lightbox

[Rad]

Hi there,

Please try this one,

(function($){
  $(".thumbnails > a").each(function(){
    $(this).on('click', function(evt){
      evt.preventDefault();
      evt.stopPropagation();
      var image = $(this).find('img').attr('src');
      console.log(image);
      $(".images > a").find('img').attr('src', image );
    });
  });
})(jQuery);

That will stop click event delegation to prevent the lightbox.

Thanks!

[fmagina]

Sup bro, thanks for the answer but it didnt work. I can uncheck the option of opening in lightbox at woocomerce configuration -> products -> exibitions. But the Product Image Galery just stay stacked, and dont move to the big one…

[Paul R]

Hi,

To further assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Thanks

[Author]

Posts