Wrap product thumbnail on WooCommerce cart page in a span

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?

7uc1f3r 7uc1f3r · Accepted Answer · 2020-11-24T09:39:40

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( '<a href="%s">%s</a>', 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( '<a href="%s">%s</a>', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
}

Become

echo '<span>' . $thumbnail . '</span>';

Wrap product thumbnail on WooCommerce cart page in a span

1 Answers