Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save mtx-z/cf9aff02d7df14320de893854ff3aba2 to your computer and use it in GitHub Desktop.
Save mtx-z/cf9aff02d7df14320de893854ff3aba2 to your computer and use it in GitHub Desktop.
Woocommerce (3.8.1-6.2.2) edit product loop thumbnail template (allows to had/edit HTML outputted by Woocommerce to generate the product loop thumbnail image area, as there is no dedicated template file to override) - Wordpress / WooCommerce 3.8.1-6.2.2
<?php
/**
* Edit default Woocommerce product loop thumbnail template
* As there is no dedicated Woocommerce template (eg wp-content/plugins/woocommerce/templates/loop/price.php)
* because it's generated using filter, we must remove Woocommerce hook, and add our own "at the same place"
* to edit the product loop thumbnail template
* tested up to
* 14/07/2023 :
* Woocommerce 6.2.2
* 12/10/2020 :
* Wordpress 5.7
* Woocommerce 3.8.1
* PHP 7.3.7
* Sage 9.0.9
* source: https://gist.github.com/krogsgard/3015581
* HOW TO USE: add in active theme functions.php file
*/
/**
* Remove woocommerce hooked action (method woocommerce_template_loop_product_thumbnail on woocommerce_before_shop_loop_item_title
* hook
*/
remove_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
/**
* Add our own action to the woocommerce_before_shop_loop_item_title hook with the same priority that woocommerce used
*/
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')) {
/**
* echo thumbnail HTML
*/
function woocommerce_template_loop_product_thumbnail()
{
echo woocommerce_get_product_thumbnail();
}
}
/**
* WooCommerce Product Thumbnail
*/
if (!function_exists('woocommerce_get_product_thumbnail')) {
/**
* @param string $size
* @param int $placeholder_width
* @param int $placeholder_height
* @return string
*/
function woocommerce_get_product_thumbnail($size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0)
{
global $post, $woocommerce;
//NOTE: those are PHP 7 ternary operators. Change to classic if/else if you need PHP 5.x support.
$placeholder_width = !$placeholder_width ?
wc_get_image_size('shop_catalog_image_width')[ 'width' ] :
$placeholder_width;
$placeholder_height = !$placeholder_height ?
wc_get_image_size('shop_catalog_image_height')[ 'height' ] :
$placeholder_height;
/**
* EDITED HERE: here I added a div around the <img> that will be generated
*/
$output = '<div class="my_new_wrapper">';
/**
* This outputs the <img> or placeholder image.
* it's a lot better to use get_the_post_thumbnail() that hardcoding a text <img> tag
* as wordpress wil add many classes, srcset and stuff.
*/
$output .= has_post_thumbnail() ?
get_the_post_thumbnail($post->ID, $size) :
'<img src="' . wc_placeholder_img_src() . '" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';
/**
* Close added div .my_new_wrapper
*/
$output .= '</div>';
return $output;
}
}
@ianfagg
Copy link

ianfagg commented Oct 12, 2020

Thanks @mtx-z, really helped me customise the thumbnails for a site I'm working on. It's easy when you know how, but not so easy to find out how to overwrite these things! So I can confirm it's still relevant for WP 5.5.1
Cheers.

@muneeb-ashraf
Copy link

Excellent, it still works for wp version 6.2.2

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