Home Forums Trusted Change the size of thumbnails products

This topic contains 2 replies, has 2 voices, and was last updated by  jreges 2 weeks, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #5321

    jreges
    Participant

    Hi,

     

    Can I change the size of thumbnails on product page?

    #5323

    Andy
    Keymaster

    This is the standard CSS styling that controls the size of these product gallery images:

    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 22.9375%;
        margin-right: 2.75%;
        margin-bottom: 2.75%;
    }
    .woocommerce div.product div.images .flex-control-thumbs li:nth-child(4n) {
        margin-right: 0;
    }
    .woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
        clear: left;
    }

    So you could for example use something like this CSS added to Customize > Additional CSS:

    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 20%;
        margin: 0;
    }
    .woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
        clear: none;
    }
    .woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(5n+1) {
        clear: left;
    }

    this would put 5 images per row with no gaps between the images.

    If you need something more specific or with gaps between the images, please let me know.

    #5359

    jreges
    Participant

    Hi,

     

    That`s work fine for me. Thanks a lot!  😉

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.