WordPress.org

Support

Support » Plugins and Hacks » WooCommerce » [Resolved] [Plugin: WooCommerce – excelling eCommerce] Photo layout on products page issue

[Resolved] [Plugin: WooCommerce – excelling eCommerce] Photo layout on products page issue

  • Hi, can anyone help please?

    On my products page there is the main product image plus smaller additional images in rows of three below the main image. I have a total of 7 images for a product – the main large one, plus two rows of three smaller ones underneath.

    For example:
    http://www.matchlessclueless.com/store/lucas-564-leds/lucas-564-led-12v/

    My problem is with the spacing between the two roes of smaller images, or rather the lack of spacing! There is a small gap (horizontally and vertically) between all the other photos, but no horizontal spacing between these two rows which spoils the layout.

    Is this a WooCommerce or theme issue?

    I have the latest versions of everything installed (i.e. WP 3.4, WooComm 1.5.7.1 and the theme is Striking 5.1.8.2).

    Thanks in advance, James 🙂

    http://wordpress.org/extend/plugins/woocommerce/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi James,
    Try this in CSS:
    img.attachment-shop_thumbnail {margin-bottom:5px;}

    http://wordpress.org/extend/plugins/woocommerce/

    Or this in CSS:

    div.thumbnails a {
        float: left;
        margin-right: 3.8%;
        margin-bottom: 3.8%;
        width: 30.75%;

    Hope this helpt, grtz, Zjan

    http://wordpress.org/extend/plugins/woocommerce/

    Thank you Zjan!

    That was exactly what I needed, very much appreciated 🙂

    Your first suggestion above worked a treat (I didn’t need to try the second). I just posted this into the custom css box in the Striking theme ‘General’ setting page, cleared the cache and problem solved. I just increased the margin slightly to 10px to match the others around the same thumbnail and now it’s perfect.

    Cheers, James

    That’s why I thought the second solution was slightly more original, the original CSS was

    div.thumbnails a {
        float: left;
        margin-right: 3.8%;
        width: 30.75%;

    Adding

    margin-bottom: 3.8%;
    would make it more consistent.

    Glad I could help

    I meant slightly more elegant 🙂

    Ah, I see what you mean. But with limited css knowledge I went with what looked the simplest / shortest option first!

    Thanks again 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] [Plugin: WooCommerce – excelling eCommerce] Photo layout on products page issue’ is closed to new replies.
Skip to toolbar