Remove srcset thumbnail attribute for products in the WooCommerce shopping cart

To modify the WooCommerce cart item thumbnail to remove the srcset attribute, you can use the wp_get_attachment_image_attributes filter. This filter allows you to change the attributes of an image retrieved by the wp_get_attachment_image() function, which WooCommerce uses under the hood.
IMPORTANT: Make sure to have a backup before you try and code you find on the net just for security sake

add_filter('woocommerce_cart_item_thumbnail', 'doChangeCartThumbnail', 10, 3);

function doChangeCartThumbnail($thumbnail, $cart_item, $cart_item_key){
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );

    // Add a temporary filter to modify image attributes
    add_filter('wp_get_attachment_image_attributes', 'removeSrcsetAttribute', 10, 3);
    
    $image = $_product->get_image('thumbnail');

    // Remove the filter to avoid affecting other images
    remove_filter('wp_get_attachment_image_attributes', 'removeSrcsetAttribute', 10);
    
    return $image;
}

function removeSrcsetAttribute($attr, $attachment, $size){
    // Check if we are in the cart
    if (is_cart()) {
        unset($attr['srcset']); // Remove the srcset attribute
    }
    return $attr;
}

Add the above code to your themes function.php file or create yourself a custom plugin. I prefer custom plugins because they are easier to work with for me personally.

---

This might work for the quick cart

it worked but only for the items in the basket area. Im using storefront and there is a quick cart on the top right which on scroll shows all the items along with the images. Those images still have the srcset attribute. Any ideas?

One way to do this is by using jQuery to remove the srcset attribute from the images in the quick cart. This approach is less ideal than a PHP-based solution because it relies on client-side JavaScript, but it might be necessary if there’s no specific PHP hook available for modifying those images.

Here’s a basic example of how you could do this:

Enqueue a custom JavaScript file in your theme.
Use jQuery to target images within the quick cart and remove the srcset attribute.
Here’s the code you would add to your theme’s functions.php file or a custom plugin:

function wpb_enqueue_scripts_custom() {
    wp_enqueue_script('wpb-custom-script', get_template_directory_uri() . '/includes/js/custom-script.js', array('jquery'), mt_rand(00000, 9999999), true);
}
add_action('wp_enqueue_scripts', 'wpb_enqueue_scripts_custom');

Then, create a JavaScript file at includes/js/custom-script.js in your theme directory with the following jQuery code:

jQuery(document).ready(function($) {
    // Target the quick cart area
    var quickCartSelector=".storefront-quick-cart"; // Update this selector based on your theme's structure

    $(document).on('mouseenter', quickCartSelector, function() {
        $(this).find('img').removeAttr('srcset');
    });
});