Created
June 29, 2012 03:51
-
-
Save krogsgard/3015581 to your computer and use it in GitHub Desktop.
WooCommerce insert wrapper around thumbnail images in loop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} | |
} | |
?> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
MichalCerny 's solution worked perfect! What would be the way to get this result for the subcategory thumbnails?