Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #19195

    Hello I would like to change the size of the image of the products in shop page and single article page.

    Thank tou


    Hi ganjou,

    The only way to change the size of images used in the main shop page is to change the number of columns used. You can do that by going to WooCommerce Settings>Pages then scroll to the bottom and change the dropdown under Column and Product Count for the column count. Fewer columns will use larger images and more will use smaller images.

    For the single blog pages, you can change the size of the image used by going to the Them Options>Layout & Settings>Default Blog Layout and using that dropdown to select one of the Big preview image options.




    What about modifying the CSS in a child theme of Abundance ?


    It isn’t a matter of the css but instead about how much room there is for the images to show. If you make them much bigger than they are now, they would overlap or touch.

    For example, the demo uses 3 column layout:

    This puts the images at 200px wide and whatever the height is when scaled to that size. The css for the 3 column layout is:

    .shop_columns_3 .products .product {
    margin: 0 4% 20px 0;
    width: 30.5%;

    The width is 30.5 and the margin is 4% on the right. This makes the columns equal 98% and fills up the space. If you wanted to increase the image size, you could decrease the margin and increase the width of the column but it would have to be proportional.


    The client is a bookstore, so he would like a “book format” image.

    The width is fine, I would just need to increase the height so it should not break the columns layout.

    What do you think ?


    In that case you just need to use an image that is taller than it is wide. Try image sizes that are 450px wide by 650px tall. If need be, you can have them set on a white background of that size if the source images are not large enough.


    Images are already that size.

    I tried to modify height (to 2/3 ratio) in config.php and reload one image… –>

    //product thumbnails

    $avia_config = array(‘width’=>80, ‘height’=>120);

    $avia_config = array(‘width’=>300, ‘height’=>450);

    $avia_config = array(‘width’=>350, ‘height’=>525);

    But it didn’t change anything.


    I found that in woocommerce-mod.css line 753





    Solution found !

    WooCommerce –> Settings –> Catalog

    Here you can change thumbnail size !!!


    Regenerate thumbnails extension to resize all the images.



    Great! Glad you figured it out. If you also look in theme folder woocommerce-config in file config.php, you will see 3 lines towards the beginning of the file where the image sizes are set.

    //product thumbnails
    $avia_config['imgSize']['shop_thumbnail'] = array('width'=>80, 'height'=>80);
    $avia_config['imgSize']['shop_catalog'] = array('width'=>300, 'height'=>300);
    $avia_config['imgSize']['shop_single'] = array('width'=>350, 'height'=>350);




    Changing those line is what I did first but without any effect :(

    Changing it in Woocommerce –> Settings –> Catalog worked even with the config.php restored to default values…


    Hi ganjou,

    Glad that you found the solution. :)



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

The topic ‘Change article image size’ is closed to new replies.