Wrap product thumbnail on WooCommerce cart page in a span - php

Question

I'm using Removing link from product thumbnail on cart page answer code to remove the permalink from the thumbnail image on the cart page.
Now I would like to wrap the thumbnail in a span or another element. I would like to leave the cart thumbnail intact. Is there a hook for this? I don't use a theme but a plugin.
Currently I am using the following code
function custom_woocommerce_cart_item_thumbnail($a) {
$class = 'attachment-shop_thumbnail wp-post-image'; // Default cart thumbnail class.
$src = 'dummy';
// Construct your img tag.
$a = '<img';
$a .= ' src="' . $src . '"';
$a .= ' class="' . $class . '"';
$a .= ' />';
// Output.
return $a;
}
add_filter( 'woocommerce_cart_item_thumbnail', 'custom_woocommerce_cart_item_thumbnail', 10, 3 );
Someone who can guide me on how to apply this?

Answer 1

The cart/cart.php template file contains (line 65-75)
<td class="product-thumbnail">
<?php
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
if ( ! $product_permalink ) {
echo $thumbnail; // PHPCS: XSS ok.
} else {
printf( '%s', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
}
?>
</td>
This ensures the output of the thumbnail with associated HTML code
The woocommerce_cart_item_thumbnail filter hook, first paramater contains $_product->get_image()
Which then leads us to the next code
/**
* Returns the main product image.
*
* #param string $size (default: 'woocommerce_thumbnail').
* #param array $attr Image attributes.
* #param bool $placeholder True to return $placeholder if no image is found, or false to return an empty string.
* #return string
*/
public function get_image( $size = 'woocommerce_thumbnail', $attr = array(), $placeholder = true ) {
$image = '';
if ( $this->get_image_id() ) {
$image = wp_get_attachment_image( $this->get_image_id(), $size, false, $attr );
} elseif ( $this->get_parent_id() ) {
$parent_product = wc_get_product( $this->get_parent_id() );
if ( $parent_product ) {
$image = $parent_product->get_image( $size, $attr, $placeholder );
}
}
if ( ! $image && $placeholder ) {
$image = wc_placeholder_img( $size, $attr );
}
return apply_filters( 'woocommerce_product_get_image', $image, $this, $size, $attr, $placeholder, $image );
}
which in turn invokes other functions.
However, because you want to keep the product thumbnail intact and wrap it in span tags, you can just use.
function filter_woocommerce_cart_item_thumbnail( $product_image, $cart_item, $cart_item_key ) {
// Wrap the thumbnail in a span
$product_image = '<span>' . $product_image . '</span>';
return $product_image;
}
add_filter( 'woocommerce_cart_item_thumbnail', 'filter_woocommerce_cart_item_thumbnail', 10, 3 );
Note: if you want to change something in the element you can use the str_replace PHP function
Like:
$image = '<img src="myimage.jpg" width="500" height="600">';
Result before:
<img src="myimage.jpg" width="500" height="600">
With str_replace:
// Replace <img with <span><img
$image = str_replace( '<img', '<span><img', $image );
Result after:
<span><img src="myimage.jpg" width="500" height="600">
Another option is to overwrite the template file (see the answer you already referred to on how to apply), so in conjunction with that answer would
if ( ! $product_permalink ) {
echo $thumbnail; // PHPCS: XSS ok.
} else {
printf( '%s', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
}
Become
echo '<span>' . $thumbnail . '</span>';