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

    Hi all,

    We are using the “Show subcategories” option for “Shop Page Display” and “Default Category Display” in the WooCommerce settings.

    I cannot figure out some of the correct image sizes for products or product categories, especially in order to reduce resizing as much as possible.

    E.g. the size of the catalog images is set in the WooCommerce settings Depending on the number of columns the image will be resized. But I get sizes all over the place, when checking the CSS on two different Replete installations:

    2cols.: 404px height

    3 cols.: 268 and 286px height

    4 cols.: 206 and 224px height

    5 cols.: 171, 172, 173 and 191px height

    So how are these sizes calulated and what would be the best option for the catalog image size? Even if I stick to just one column layout I am not sure, what to use, because the sizes differ so much.

    Next thing is, we use square product category images. But when I open a product category, the same image is shown above the products, but in a completely unrelated size! The template uses the 450×280 px thumb, which makes no real sense. But the image is then displayed with a width of 780px and a height of 485 px, thus stretching the 450×280 px thumb and rendering the image blurred. WTF?

    Where can I edit the size of the large category image resp. what thumb it should use? Or better yet, where and how can I give each category a separate image for the category thumbnails and the large category image above the products?

    Thanks in advance



    Hi Michael,

    The image sizes are generated by the themes functions.php file where the code tells wordpress to create a number of additional thumbnail image sizes. IE:

    $avia_config['imgSize']['widget'] 			 	= array('width'=>36,  'height'=>36);						// small preview pics eg sidebar news
    $avia_config['imgSize']['slider_thumb'] = array('width'=>70, 'height'=>50); // slideshow preview pics
    $avia_config['imgSize']['fullsize'] = array('width'=>930, 'height'=>930, 'crop'=>false); // big images for lightbox and portfolio single entries
    $avia_config['imgSize']['featured'] = array('width'=>1500, 'height'=>430 ); // images for fullsize pages and fullsize slider
    $avia_config['imgSize']['featured_small'] = array('width'=>990, 'height'=>280 ); // images for fullsize pages and fullsize slider
    $avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ); // images for portfolio entries (2,3 column)
    $avia_config['imgSize']['portfolio_small'] = array('width'=>241, 'height'=>179 ); // images for portfolio 4 columns
    $avia_config['imgSize']['logo'] = array('width'=>446, 'height'=>218, 'copy'=>'greyscale'); // images for dynamic logo/partner element

    //dynamic columns
    $avia_config['imgSize']['dynamic_1'] = array('width'=>492, 'height'=>165); // images for 2/4 (aka 1/2) dynamic portfolio columns when using 3 columns
    $avia_config['imgSize']['dynamic_2'] = array('width'=>676, 'height'=>151); // images for 2/3 dynamic portfolio columns
    $avia_config['imgSize']['dynamic_3'] = array('width'=>765, 'height'=>107); // images for 3/4 dynamic portfolio columns

    Before altering anything, try using this plugin to regenerate your thumbnails in case anything never got generated correctly (this could be why you are seeing confusing sizes when inspecting the code):




    Hi Devin,

    those are not used by woocommerce products or product categories. So there are even more thumbs generated, but then they are not used correctly.An example:

    I upload category1.jpg with 450x450px. Next to all the other sizes the image is resized to 308x308px (my product image settings in woocommerce). The theme uses the 308px thumb, but resizes the images again, depending on the number of columns in the shop layout.


    It also uses another size, 450x280px and displays that as a header image in the category, but in 780x485px.


    See what I mean?



    Yes, the size is changing because they need to inherit the size of their containers. You can see this when changing the number of columns on product pages. The thumbnails sizes for product pages is located on config-woocommerce > config.php, find this code:

    //product thumbnails
    $avia_config['imgSize']['shop_thumbnail'] = array('width'=>130, 'height'=>85);
    $avia_config['imgSize']['shop_catalog'] = array('width'=>450, 'height'=>450);
    $avia_config['imgSize']['shop_single'] = array('width'=>450, 'height'=>999, 'crop' => false);




    That doesn’t explain the behaviour of the header image. That’s actually my biggest problem right now, all other things I can solve. But that image is driving me crazy. Could you point me to the part of the template, where that is loaded? I would like to have a different image there, since the current setup makes no sense at all (As written before: It also uses another size, 450x280px and displays that as a header image in the category, but in 780x485px. See )


    You can change the image size by modifying following line in wp-contentthemesrepleteconfig-woocommerceconfig.php

    $image = wp_get_attachment_image( $attachment_id, $image_size, false, array('class'=>'category_thumb'));

    I.e. if you want to display the full size image replace it with

    $image = wp_get_attachment_image( $attachment_id, 'full', false, array('class'=>'category_thumb'));


    Hi guys, thanks for your answers so far. I would still love to have a different image there. Let me explain why:

    Changing the image to full size doesn’t help much either. I guess not many people are using the category images at all or at least don’t show them there (By there I mean above the subcategories resp. products). For better differentiation/understanding let*s call the image shown on the category page “category header” (the one in the slideshow_container)

    If I would use 450×450 px, as intended by Kriesi, the category header will either be cut of and displayed too large (i.e. stretched) in the default setting, or simply displayed too large/stretched, if I use above modification.

    I could switch to larger category images, but as long as they are square or even in portrait format, the resulting category header image would be way to high. Obviously for the same design reasons, Kriesi has opted for a landscape orientation himself, but cropped and in the wrong dimensions.

    Naturally I might be doing something completely wrong, but if I am right this “category header” image is simply done wrong. Would you please be so kind and check that? It is not used in the demo, so I can’t verify it there.

    Ideally we can find a way to have a different image as the category header, as nothing else makes much sense, imho. Correct me if I am wrong.




    Hi Michael,

    The Replete theme does use the category images in the demo. See:

    Right now it pulls from this image size:

    $avia_config['imgSize']['featured_small'] = array('width'=>990, 'height'=>280 ); // images for fullsize pages and fullsize slider

    So for the link above its this image×280.jpg

    When it gets output in the page it is only actually 780×221 because of the sidebar but the starting image size the featured_small created in the functions.php file.




    Hi Devin,

    thanks for your answer. And you are right, it is used there, but the demo doesn’t use the category image as a header and at the same time as thumbnails if you display categories and subcategories. E.g. the category picture here would be cropped and display nothing useful, if you’d enable “show subcategories” in the woocommerce settings/catalog/. That’s what we are trying to do and that’s what doesn’t work right :-(

    These are our category thumbnails: and this is what happens to them, when shown as category headers:

    So I guess it is nearly impossible to make use of the category images for thumbs AND as category header at the same time, right?

    Sure, we could use 990px wide images, but that would still crop the header image, where I don’t want it. And the other solution would be to simply leave our thumbs at 450px and then exchange each resulting thumb-450×280.jpg for each category header, but that kind of fiddling is exactly what I would like to avoid. Do you see my dilemma?




    You could do as Peter suggested in this post and change the image used to one of the smaller sizes or even the shop_catalog image size (450×450) found at the top of the config.php file in the config-woocommerce folder.

    Then use this css to change the image container from making the image full width: .slideshow li img {
    width: auto;


    I simply tricked it and used 930 x 430 images and renamed them to image-450×280. Stupid, but hell, the website has to go live at some point.

    Can somebody tell me a trick how to show the category header for categories, but not for subcategories?


    In config.php replace

    $image = wp_get_attachment_image( $attachment_id, $image_size, false, array('class'=>'category_thumb'));
    if($image) echo "<div class='page-thumb'>{$image}</div>";


    if(!empty($attachment_id) && $term->parent == 0)
    $image = wp_get_attachment_image( $attachment_id, $image_size, false, array('class'=>'category_thumb'));
    if($image) echo "<div class='page-thumb'>{$image}</div>";

    The $term->parent == 0 check will only return true if no parent category is set. sub categories will always return an id which is not 0.

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

The topic ‘product category image sizes’ is closed to new replies.