Skip to content

Instantly share code, notes, and snippets.

@krogsgard
Created June 29, 2012 03:51
Show Gist options
  • Save krogsgard/3015581 to your computer and use it in GitHub Desktop.
Save krogsgard/3015581 to your computer and use it in GitHub Desktop.
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;
}
}
?>
@boutzamat
Copy link

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

@ryanbeymer
Copy link

@rashmirai1
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

carasmo commented Feb 8, 2017

@kaistaerk
Copy link

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

@9beat7
Copy link

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
Copy link

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

@aronvdl
Copy link

aronvdl commented Dec 21, 2017

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

@knalleDK
Copy link

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
Copy link

myadlan commented Mar 24, 2018

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

@jamiemitchell
Copy link

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
Copy link

mtx-z commented Dec 10, 2019

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