Woocommerce – Space between Images (Product and gallery-thumbs)

[Realbilly]

Hello,

we are using the woocommerce product-gallery for the first time and wondering why there isn´t any space between the product image and the gallery thumbs below. On the contrary: it looks like they even overlap.

How can I adjust the spacing between that objects?

Thank you!

[scrambler]

Please provide a link to your site page displaying the issue

[Realbilly]

Oh, of course – here is the link:

https://eudora-verlag.de/en/product/aristocracy-at-call-the-counts-and-countesses-of-manfred-of-sicily-1198-1312_subvolume-1-text_subvolume-2-catalogue-and-indices-italia-regia-7_marie-ulrike-jaros/

[scrambler]

The styling is being done by WooCommerce on this, so you should ask them if there is a WooCommerce setting that can address the issue.

If you don’t get anywhere with them, then you could add the rule below in the Theme Global Custom CSS Rule box, and it should fix it as long as they don’t change their code.

.woocommerce-product-gallery–with-images > ol {margin-top: 20px !important;}

[Weaver]

I think that in general Woocommerce does not have settings or anything else to modify the look built in.

I’ve helped build a Woocommerce site for a family member, and we did all the customizations needed. Maybe a Woo customizer plugin might be a useful thing, but not my radar as a thing to do.

All the different classes do seem to be consistent and permanent choices, so I think they expect users who need customization to simply provide the proper rules – either with the WP Added CSS, or by the theme.

You can also Google “customizing woocommerce elements” to get all sorts of guidance.

 

[Realbilly]

Thank you very much for the answers and the hint, but it doesn’t seem to work. I don’t see any change in the backend when I paste the code in the custom css of the weaver theme.

However, under

https://wordpress.org/support/topic/zero-gap-between-product-gallery-images/

I found a description of this particular problem. And the WC developers are blaming the theme developers again. The code given here:

.woocommerce-product-gallery .woocommerce-product-gallery__image {
margin-bottom: 10px;
padding: 2px;
}

does not work for me either. Padding changes the appearance, but margin does not.

[scrambler]

Sorry,  the forum messed up the rule, I posted it again inside a preformatted box so it would not change the double dash….

Put the corrected rule below

.woocommerce-product-gallery--with-images > ol {margin-top: 20px !important;}

If it does not work, Leave the rule in and post back so I can see why it is not working

[Realbilly]

Great! That works perfectly.

Thank you very much.

[Author]

Posts