If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #29442


    how can I change the size of the images in the 3 column gallery for the product page in woo commerce. I need them to be about half the size.




    I’m not sure if you mean the shop page thumbnails or the thumbnails which are displayed within a 3 columns gallery on a product page. I guess you want to change the shop thumbnails (like demonstrated here: http://www.kriesi.at/themes/flashlight/shop/ ). Go to WooCommerce > Settings > Catalog and change the “Catalog Images” size (by default 200x140px).


    sorry for the misunderstanding, but I do mean the thumbnails displayed within a 3 column gallery on a product page.



    You can add this on your custom.css or Quick CSS:

    .shop_columns_3 .products .product {
    margin: 20px 4% 20px 0;
    width: 20.5%;
    .products .product.first {
    clear: none;
    #top .products .product.last, #top #main .products .product.last {
    margin-right: 4%;
    #top .thumbnail_container .button {
    margin: -30px 0 0 0;



    Sorry but that did not help. From the code I guess that I need to change something in the code of the avia framework. In the css there is a “#top div .avia_3_column_gallery” defined but changing this does not change the image size itself.



    Can you give us a screenshot of what you’re trying to do?

    Best regards,


    Hi Ismael,

    Screenshot Product Page

    so I would like to make those image thumbnails smaller and square (height=width).




    If you want to make them square. Please edit woocommerce-config.php, find this code:

    $avia_config['imgSize']['shop_catalog'] = array('width'=>200, 'height'=>140);

    Replace it with:

    $avia_config['imgSize']['shop_catalog'] = array('width'=>201, 'height'=>201);

    Then add this on your custom.css or Quick CSS:

    .shop_columns_3 .products .product {
    width: 201px;
    height: 201px;
    .thumbnail_container_inner {
    height: 100%;
    #top .thumbnail_container img, #top .thumbnail_container a:hover img {
    width: 100%;
    height: 100%;

    Regenerate the thumbnails: http://wordpress.org/plugins/regenerate-thumbnails/


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

The topic ‘Flashlight Theme: size of 3 column image gallery’ is closed to new replies.