-
-
Save krogsgard/3015581 to your computer and use it in GitHub Desktop.
<?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; | |
} | |
} | |
?> |
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
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.