Use different size thumbnails for subcategories and products in Woocommerce

Question

I need to set a different size of thumb for subcategory and product, is this possible?

I need to show a list of subcategories with thumb 500 x 100 and a list of products with thumbnail 300 x 390.

I have already setting in woocommerce> setting > product > display > Product images but i cannot set a different size for subcategory or product.

Answer 1

lol i develop a clean solution:

function register_size_image() {
   add_image_size( 'category_thumb', 1170, 585,true );
   add_image_size( 'product_thumb', 750, 940,true );
}

add_action( 'after_setup_theme', 'register_size_image' );


function size_of_category_thumb($u)
{
    return array(1170, 585,true);
}
add_filter('subcategory_archive_thumbnail_size', 'size_of_category_thumb');

function size_of_product_thumb($u)
{
    return array(750, 940,true);
}
add_filter('single_product_archive_thumbnail_size', 'size_of_product_thumb');

Answer 2

Yes, That is quite possible. Follow these steps -

1. Add new image size. To do that add following code to your theme's functions.php

   add_image_size( 'your-custom-size', 500, 100 ); // You can add multiple image sizes by repeating this line with different values (as per you need)

2. After this step upload images. If it is overhead for you to upload images again, you can use this plugin

   This will create thumbnails with all your specified sizes.

3. Now in your theme, whereever you are showing images with function like -

   the_post_thumbnail( 'your-custom-size' ) or wp_get_attachment_image( 42, 'your-custom-size' ), pass your image size name as param.

Answer 3

i resolve overriding woocommerce's function, i put this on my functions.php

add_image_size( 'category_thumb', 500, 100,1 );
add_image_size( 'product_thumb', 300, 390,1 );

function woocommerce_subcategory_thumbnail( $category ) {
    $small_thumbnail_size       = 'category_thumb';
    $thumbnail_id           = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );

    if ( $thumbnail_id ) {
            $image        = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
            $image        = $image[0];
            $image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id, $small_thumbnail_size ) : false;
            $image_sizes  = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id, $small_thumbnail_size ) : false;
    } else {
            $image        = wc_placeholder_img_src();
            $image_srcset = $image_sizes = false;
    }

    if ( $image ) {
            // Prevent esc_url from breaking spaces in urls for image embeds
            // Ref: https://core.trac.wordpress.org/ticket/23605
            $image = str_replace( ' ', '%20', $image );

            // Add responsive image markup if available
            if ( $image_srcset && $image_sizes ) {
                    echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" />';
            } else {
                    echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" />';
            }
    }
}

function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) 
{
      global $product;
//        $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
    return $product ? $product->get_image( 'product_thumb' ) : '';
   }

it works!

Answer 4

function yourFunctionName()
{
    return array(1140, 300,true);
}
add_filter('subcategory_archive_thumbnail_size', 'yourFunctionName');

Works for me