Related Product Images - Adjust Spacing

Hi there,

Any chance you can link us to your site? Should be do-able with some CSS.

Let me know :)

https://stockisla.com/product/lion/

the white gaps of space in between the related images i think its also called gutter, how to make reduce white gap size and pics slightly bigger/wider

And is there a way to make the related images have an extra column below the first one?

Give this a shot:

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product {
    width: 31%;
}

.woocommerce .related ul.products li.product {
    margin-left: 2%;
}

.inside-wc-product-image {
    width: 100%;
}

Not too sure what you mean by an extra column?

I tried it but had to adjust it to make it work, this is the code im using

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product {
width: 28.6%;
}

.inside-wc-product-image {
width: 110%;
}

But now there is a wide gap between the first and second column, see: https://stockisla.com/product-tag/lion/

How to decrease column size to same size as the row gaps?

Try this:

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product a img {
    margin-bottom: 0;
}

That worked, but I noticed a problem on the right side for mobile is missing padding or margin, the 3 image to the right is hugging the border.

See:
https://imgur.com/a/J2Se4qD

That's happening because of this CSS you used:

.inside-wc-product-image {
    width: 110%;
}

Instead of the CSS you shared above, I would do this:

.inside-wc-product-image {
    width: 100%;
}

.woocommerce .wc-columns-3 ul.products li.product, .woocommerce-page .wc-columns-3 ul.products li.product {
    width: 32%;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-left: 1%;
}

.woocommerce ul.products {
    margin-left: -1%;
}

Man this sucks, so I deleted the code that i used and tried yours, but then the related product images on the product page have the big white space gaps again, so I tried experimenting with the numbers to no avail. I guess I'll have to try something else to get it to line up correctly with reduced space gaps.

I reverted back to my deleted code as that at least looks good on desktop

You'd need both blocks of code I provided in order to adjust the spacing for both instances.

.inside-wc-product-image {
    width: 100%;
}

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product,
.woocommerce .wc-columns-3 ul.products li.product, 
.woocommerce-page .wc-columns-3 ul.products li.product {
    width: 32%;
}

.woocommerce .related ul.products li.product,
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-left: 1%;
}

.woocommerce ul.products {
    margin-left: -1%;
}

after tinkering around i finally got it to work and look how i want it thanks for the code :)

this is what i changed to make it work:

.inside-wc-product-image {
width: 110%;
}

.woocommerce .wc-related-upsell-columns-3 .related ul.products li.product,
.woocommerce .wc-columns-3 ul.products li.product,
.woocommerce-page .wc-columns-3 ul.products li.product {
width: 28.65%;
}

.woocommerce .related ul.products li.product,
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin-left: 3.7%;
}

.woocommerce ul.products {
margin-left: -4%;
}

Awesome :)

We'll be making this much easier in GPP 1.8.

ok, when is GPP 1.8 coming out? so i can not use the css code hehe

It won't be for a month or so :)