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
thanks for the code, i was wondering, how can I have every and each items inside woocommerce products loop separately? I am trying to make a catalog page for my wordpress theme, I have a javascript plugin that helps me make suck a page, but the markup I need is really different from what I have in woocommerce default loops. I want to have each item separately and then customize them to match my jQuery plugin, do you think that's possible in any ways?

and oh by the way, I want it inside a php file witheme my own theme, not inside woocommerce overridable template files

Thanks, this totally helped me!

Hi there - this is a great piece of code, thanks. But one additional question: this one wraps the div only around the product's images, leaving out the subcategory-images. How can we edit the function to put the div around the subcategory-images in the loop as well?

Found it, add:

    if ( ! function_exists( 'woocommerce_subcategory_thumbnail' ) ) {
function woocommerce_subcategory_thumbnail( $category ) {
    $small_thumbnail_size   = apply_filters( 'single_product_small_thumbnail_size', 'shop_catalog' );
    $dimensions             = wc_get_image_size( $small_thumbnail_size );
    $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];
    } else {
        $image = wc_placeholder_img_src();
    }

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

        echo '<div class="imagewrapper"> <img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" /></div>';
    }
}

}

This is great but the latest version of WooCommerce doesn't like it. Everything below the header vanishes. I removed this from my functions.php file and it brought it back. Any ideas on how to fix this?

Everything here not working .. here is worked version :) @schmoot

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


if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_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;
        $output = '<div class="imagewrapper">';

        if ( has_post_thumbnail() ) {               
            $output .= get_the_post_thumbnail( $post->ID, $size );              
        }                       
        $output .= '</div>';
        return $output;
    }
}

I could really use the image path.. Is there a way to get it?

thx @MichalCerny

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