Different Woocommerce archive image sizes/columns for specific categories

Hi there,

you can use the filter provided in this article:

https://docs.generatepress.com/article/option_generate_woocommerce_settings/

Amazing David, very useful.

The problem is that when I choose 1 column, the image is pixelated. I guess it comes from what is selected in appearance customizer, which is set to a 4 column-layout. Any idea?
See here http://35.232.201.230/~suzanne2/product-category/artworks/twilight/

Additionally, I would like the layout to be controlled from the back-end instead of manually adding them to functions.php. I tried adding a true/false ACF field linked to categories... but I don't really know how to make that work. Will try the ACF forum as well.

Can you confirm the original image size of the product?

I believe the issue is relate to this other thread https://generatepress.com/forums/topic/images-of-woocommerce-at-the-same-height/#post-983348

I removed the CSS code affecting the size of the product image and now the one column layout shows a small thumbnail.

Should I use 1 column in the customizer and then change 4 columns in functions?

I understand woocommerce lets you control the width of images, but I also would like to define the max-height.

Ok so try this CSS to target that specific tag archive:

.woocommerce.term-twilight ul.products li.product a img {
    width: 1010px;
}

Thank you David, it works but still images are pixelated. And second image is smaller therefore does not fill the container.
http://35.232.201.230/~suzanne2/product-category/artworks/twilight/

The original files are large:
- http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_012.jpg
- http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015.jpg

Can you disable the lazyloader you're then flush and disable any caches. Then i can take another look.

Done. I didn't realize lazyloader was active, it was part of the smushit plugin...

Hi there,

It looks like WooCommerce is serving a 300x300 image in that place.

I wonder if this filter will help?:

add_filter( 'subcategory_archive_thumbnail_size', function( $size ) {
    if ( function_exists( 'is_product_category' ) && is_product_category( 'twilight' ) ) {
        return 'full';
    }

    return $size;
} );

And then this CSS:

.archive .product_cat-twilight .inside-wc-product-image {
    display: block;
}

Thank Tom,

it does not work. Still serving the 300px as setup in the customizer

Out of curiosity, does this do anything?:

add_filter( 'subcategory_archive_thumbnail_size', function( $size ) {
    return 'full';
} );

Yes and no.
It seems to work but only after I go into the product and view its images (featured and gallery)

However, this is what gets loaded... but it looks fine now !?!?!

<img width="300" height="200" src="http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-300x200.jpg" class="secondary-image attachment-shop-catalog" alt="Twilight" srcset="http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-300x200.jpg 300w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-800x533.jpg 800w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-768x512.jpg 768w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-1024x683.jpg 1024w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-600x400.jpg 600w" sizes="(max-width: 300px) 100vw, 300px" style="opacity: 0;">

Hmm, let's try this:

add_filter( 'option_woocommerce_thumbnail_image_width', function( $width ) {
    if ( function_exists( 'is_product_category' ) && is_product_category( 'twilight' ) ) {
        return 1000;
    }

    return $width;
} );

Unfortunately, the WC documentation when it comes to this stuff isn't very good at all.

Uhmmm, unfortunately it does not seem to work.