[Resolved] Different Woocommerce archive image sizes/columns for specific categories

[Raul]

Hello,

I am working on a site in which Artworks are woocommerce products organized by Art Series (product categories). Some Series have only one single artwork, wheres other include multiple artworks.

Is it possible to change the number of columns shown for certain product category archives? For example show 4 columns for art series (category) with many artworks, such as http://35.232.201.230/~suzanne2/product-category/artworks/remote-sensing/ and 1 column for art series with one single artwork such as http://35.232.201.230/~suzanne2/product-category/artworks/twilight/

Otherwise, how can I display the product thumbnail in GP Element? i.e. this specific art series called Biota shows currently the category image via the_post_thumbnail( );. Perhaps there is a way of showing the product, with the image hover option to show second image and link to single product page…

Thanks!

[David]

Hi there,

you can use the filter provided in this article:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Raul]

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.

[David]

Can you confirm the original image size of the product?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Raul]

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.

[David]

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Raul]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Raul]

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

[Tom]

Hi there,

It looks like WooCommerce is serving a 300×300 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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Raul]

Thank Tom,

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

[Tom]

Out of curiosity, does this do anything?:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Raul]

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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Raul]

Uhmmm, unfortunately it does not seem to work.

[Author]

Posts