Docs

[NLeVasseur]

Hi There,
On the product description page, I’ve got a nice big image with thumbs underneath. How can I adjust the padding in this column so there are only three thumbs with the fourth one wrapping onto the next line?

More info to follow. . .

Thanks very much!

Regards,
Nancy

[NLeVasseur]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

Please add this code to Admin > Appearance > Customizer > Custom > CSS

.woocommerce div.product .images .thumbnails>a:nth-child(4n+4) {
    margin-right: 0;
    clear: left;
}

Hope this helps.

[NLeVasseur]

This reply has been marked as private.

[Friech]

Hi Nancy,

Please update the CSS code to this:

.woocommerce div.product .images .thumbnails>a:nth-child(4n+4) {
	margin-right: 4%;
}
.woocommerce div.product .images .thumbnails>a:nth-child(3n+1) {
	margin-right: 4%;
    margin-left: 0;
    clear: left;
}
.woocommerce div.product .images .thumbnails>a:nth-child(3n+3) {
	margin-right: 0 !important;
}
.single-product .thumbnails {
	padding-left: 10%;
}

Hope it helps, Cheers!

[Author]

Posts