Last active
February 22, 2024 08:47
-
-
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
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 | |
/** | |
* 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; | |
} | |
} | |
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
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.