Home Forums Weaver Xtreme Theme Woocommerce – Space between Images (Product and gallery-thumbs)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #74385
    Realbilly
    Participant

    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!

    #74386
    scrambler
    Moderator

    Please provide a link to your site page displaying the issue

    #74387
    Realbilly
    Participant
    #74388
    scrambler
    Moderator

    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;}

    #74389
    Weaver
    Keymaster

    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.

     

    #74390
    Realbilly
    Participant

    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.

    #74391
    scrambler
    Moderator

    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

    #74392
    Realbilly
    Participant

    Great! That works perfectly.

    Thank you very much.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.