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

    Hello,

    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.

    Cheers

    Freddi

    #140664

    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).

    #163109

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

    #163323

    Hey!

    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;
    }

    Regards,
    Ismael

    #163499

    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.

    #163934

    Hello!

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

    Best regards,
    Ismael

    #164127

    Hi Ismael,

    sure:
    Screenshot Product Page

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

    Thanks
    Freddi

    #164261

    Hello!

    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/

    Cheers!
    Ismael

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

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