[Support request] Product picture help, cant find on forum

[Rishabh]

Hi, Please check this link below the main product image are the additional images for that product, now the problem is that, that additional picture thumbnails are too close to the main image and looks ugly, also too close to each other, how can i add padding to all sides of additional photos, also make them a bit smaller.
Kindly tell me if its possible for those additional pics to show vertically on the left hand side of the main image, thank you so much. 🙂

[David]

Try this to add padding to the images:

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 10px;
    box-sizing: border-box;
}

Or go all out and try this for aligning the images to the left with padding:

.woocommerce div.product div.images.woocommerce-product-gallery {
    display: flex;
}
.woocommerce div.product div.images .flex-control-thumbs {
    order: -1;
    flex: 1 0 25%;
    display: flex;
    flex-direction: column;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100% !important;
    padding: 10px;
    box-sizing: border-box;
}

[Author]

Posts