Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save mtx-z/cf9aff02d7df14320de893854ff3aba2 to your computer and use it in GitHub Desktop.

Select an option

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

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

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