Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce insert wrapper around thumbnail images in loop
<?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;
}
}
?>
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Dec 3, 2012

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?

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Dec 3, 2012

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

@daltonrooney

This comment has been minimized.

Copy link

@daltonrooney daltonrooney commented Dec 27, 2012

Thanks, this totally helped me!

@Klokwerk

This comment has been minimized.

Copy link

@Klokwerk Klokwerk commented Aug 24, 2014

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?

@Klokwerk

This comment has been minimized.

Copy link

@Klokwerk Klokwerk commented Aug 24, 2014

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>';
    }
}

}

@schmoot

This comment has been minimized.

Copy link

@schmoot schmoot commented Feb 18, 2015

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?

@MichalCerny

This comment has been minimized.

Copy link

@MichalCerny MichalCerny commented May 21, 2015

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;
    }
}
@boutzamat

This comment has been minimized.

Copy link

@boutzamat boutzamat commented Sep 21, 2015

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

@ryanbeymer

This comment has been minimized.

Copy link

@ryanbeymer ryanbeymer commented Oct 10, 2015

@rashmirai1

This comment has been minimized.

Copy link

@rashmirai1 rashmirai1 commented Apr 1, 2016

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!

@inakicalvo

This comment has been minimized.

Copy link

@inakicalvo inakicalvo commented May 20, 2016

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;
}
@dompl

This comment has been minimized.

Copy link

@dompl dompl commented Jul 16, 2016

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

@iliopoulos1998

This comment has been minimized.

Copy link

@iliopoulos1998 iliopoulos1998 commented Aug 5, 2016

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.

@carasmo

This comment has been minimized.

Copy link

@carasmo carasmo commented Feb 8, 2017

@kaistaerk

This comment has been minimized.

Copy link

@kaistaerk kaistaerk commented May 7, 2017

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

@9beat7

This comment has been minimized.

Copy link

@9beat7 9beat7 commented May 9, 2017

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' );
@knalleDK

This comment has been minimized.

Copy link

@knalleDK knalleDK commented Nov 22, 2017

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

@aronvdl

This comment has been minimized.

Copy link

@aronvdl aronvdl commented Dec 21, 2017

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

@knalleDK

This comment has been minimized.

Copy link

@knalleDK knalleDK commented Feb 19, 2018

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

This comment has been minimized.

Copy link

@myadlan myadlan commented Mar 24, 2018

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

@jamiemitchell

This comment has been minimized.

Copy link

@jamiemitchell jamiemitchell commented Nov 9, 2018

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>';
}
@mtx-z

This comment has been minimized.

Copy link

@mtx-z mtx-z commented Dec 10, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment