WooCommerce insert wrapper around thumbnail images in loop

woo-loop-image-wrap.php

<?php
/* 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 = '<div class="imagewrapper">';

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

hi everybody! is it possible to add more classes to the image--- like i am customising my own woocommerce theme with a referance to a html page which look like this--- `

        <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-3">
            <div class="product-box">
            <div class="product-img"><img src="images/product-09.jpg" alt="" title=""></div>
          <h2>LEATHER BLAZER JACKET WITH ZIP POCKETS</h2>
          <p>$230</p>
          <div class="overbox">
            <div class="cart-bag"></div>
            <div class="heart"></div>
            <button class="title overtext"> Quick View </button>
            <div class="tagline overtext"> $230 </div>
          </div>
        </div>
        </div>` 

now how can i add all these div classes according to the structure pls pls pls help!

Thanks a lot @MichalCerny. With your PHP and some CSS I managed to set up a nice grid for an online bookstore. Now the covers of the books, which have very different sizes and proportions, are harmoniously distributed.

Here's the CSS in case anyone wants to reuse it:

.imagewrapper {
    background-color: #EDEDED;
    height: 295px;
    position: relative;
}

.imagewrapper img {
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    margin: auto;
    vertical-align: middle;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

ul.products li.product img {
    display: block;
    margin: auto;
}

Bit late, but if someone needs the image URL:

$image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), $size)[0];

and alt

get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true );

Hi there

I would like to do the same (put a wrapper around the product image) within the single product page. Actually I would like to have a result exactly as like in the following link

http://www.bildreich.ch/produkt/weihnachtliche-daemmerstunde-6/

Can anyone help?

Thank you in advance.

There are much easier ways to do this:
https://gist.github.com/carasmo/261fbba1b422188bb1bd79451544ac0b

a plugin can also do this and is independent from a theme
https://github.com/kaistaerk/woocommerce-image-wrap

What about using post_thumbnail_html filter?

function product_thumbnail_wrapper() {
	function product_thumbnail_wrapper_html( $html ) {
		$html = '<div class="image-wrapper">' . $html . '</div>';
		return $html;
	}
	add_filter( 'post_thumbnail_html', 'product_thumbnail_wrapper_html' );
}
add_action( 'woocommerce_before_shop_loop', 'product_thumbnail_wrapper' );

Michal Cerny's method works for related product too - ) 9beat7's simpler way doesn't - at least for me.

MichalCerny 's solution worked perfect! What would be the way to get this result for the subcategory thumbnails?

works for me (from https://bradley-davis.com/add-wrapper-around-images-woocommerce-archive-pages/):

// Add the wrap to products
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<div class=\"image-wrap\">";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "</div>";'), 12, 2);

// If there is sub categories add wrap too
add_action( 'woocommerce_before_subcategory_title', create_function( '', 'echo "<div class=\"image-wrap\">";'), 5, 2 );
add_action( 'woocommerce_before_subcategory_title', create_function( '', 'echo "</div>";' ), 12, 2 );

Bradley Davis solution is the simplest one and easy to implement. Thanks knalleDK!

This method is tested and working in Genesis.

add_action( 'woocommerce_before_shop_loop_item_title', 'genesis_starter_product_thumb_open', 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title', 'genesis_starter_product_thumb_close', 12, 2);
add_action( 'woocommerce_before_subcategory_title', 'genesis_starter_product_thumb_open', 5, 2);
add_action( 'woocommerce_before_subcategory_title', 'genesis_starter_product_thumb_close', 12, 2);
/**
* Add wrap around all product images.
*
*/
function genesis_starter_product_thumb_open() {
    echo '<div class="product-thumb-wrap">';
}

function genesis_starter_product_thumb_close() {
    echo '</div>';
}

Updated for latest WP 5.3 https://gist.github.com/mtx-z/cf9aff02d7df14320de893854ff3aba2