Help with Woocommerce product images display

Hi,
I’m not sure if this is a theme issue or a WooCommerce issue, but I’d like some help with the way the product images are displaying.

  1. I’d like to have some space between the main product image and thumbnails.
  2. I’d like some space between the thumbnails so they’re not all crammed together.
  3. I’d like if if when you click on a thumbnail image it changes the main product image on that page and not open the image full screen. (see this page for an example of what I want to happen: https://kindlerepairplus.com/product/kindle-voyage-replacement-screen/. I know this site is also using WooCommerce so I’m not sure why my site is acting differently.)

This is a page on my site: https://wonderfilleddays.com/product/world-war-ii-game/

Hello there,

I hope you are doing well today.

You can use the following CSS code to make the changes by going to Appearance > Customize > Additional CSS and pasting it there.


/*Add padding to image*/
.woocommerce div.product div.images img {
    padding-bottom: 30px;
}

.woocommerce-product-gallery__image {
    padding-right: 10px;
}

As for the third request, the theme does not have the option to change the main product image built into it so we would not be able to add that option with CSS but you can contact our development specialist here:

https://colorlib.com/out/envatostudio

Best Regards,
Support

Thanks for the quick support!
That worked perfectly.

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support