Woocommerce: Set thumbnail detail (clipping area)

Question

I am using the german Wordpress 3.5.1–de_DE with Woocommerce 2.0.8 and the Woothemes Mystile Theme 1.2.8.

I have a big picture for a product (Jellyfish.jpg) and want to use a specific area of that big picture as a thumbnail, because Wordpress/Woocommerce automatically chooses a not useful part of the image. So I used the Wordpress crop tool in Edit Image under Media to generate a 150x150 thumbnail. This sucessfully generates a thumbnail (like Jellyfish-e1367238219134-150x150.jpg) but WP/Woocommerce uses another image (Jellyfish-150x150.jpg).

On my FTP I found the following files in /wordpress/wp-content/uploads/

012 KB 0666 29.04.2013 14:56 Jellyfish-150x112.jpg
015 KB 0666 29.04.2013 14:56 Jellyfish-150x150.jpg
026 KB 0666 29.04.2013 14:56 Jellyfish-300x225.jpg
082 KB 0666 29.04.2013 14:11 Jellyfish-787x300.jpg
009 KB 0666 29.04.2013 14:56 Jellyfish-90x67.jpg
017 KB 0666 29.04.2013 14:23 Jellyfish-e1367238219134-150x150.jpg
016 KB 0666 29.04.2013 14:58 Jellyfish-e1367240287874-150x150.jpg
758 KB 0666 29.04.2013 13:34 Jellyfish.jpg

I searched in the template and the plugin but it seems like they simple just use the_post_thumbnail and output the Jellyfish-150x150.jpg image (which is the useless autogenerated thumbnail).

Am I doing something wrong? What is the Jellyfish-e1367238219134-150x150.jpg image for? How can I choose which part of the image I want to show as a thumbnail?

Answer 1

You can fix this using the following code snippet from Brian Krogsard, that I modified. This code should preferably be placed into the functions.php file of your child theme. Instead of taking the original 150x150 thumb it now takes the correct, cropped 150x150 thumb.

/* This snippet removes the action that inserts thumbnails to products in teh loop
* and re-adds the function customized with our wrapper in it.
* It applies to all archives with products.
*
* @original plugin: WooCommerce
* @author of snippet: Brian Krogsard
*/

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

/**
* WooCommerce Loop Product Thumbs
**/
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    }
}


/**
* WooCommerce Product Thumbnail
**/
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
        global $post, $woocommerce;

        if ( ! $placeholder_width ) $placeholder_width = $woocommerce->get_image_size( 'shop_catalog_image_width' );
        if ( ! $placeholder_height )$placeholder_height = $woocommerce->get_image_size( 'shop_catalog_image_height' );

        $output = '';

        if ( has_post_thumbnail() ) {
            $output .= get_the_post_thumbnail( $post->ID, array(150, 150) );
        } else {
            $output .= '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';
        }

        return $output;
    }
}

Answer 2

The *e1367238219134-150x150.jpg files are automatically generated by Wordpress as work copies once you save an image after editing it.

In order to use another image on your theme, you would want to contract a coder to modify your the pertinent template files.