How to Add Custom Classes to Product Thumbnails in the WooCommerce Loop

In a recent Business Bloomer Club Slack thread, a developer asked how to add custom classes to the <img> tags in the WooCommerce product loop. The default woocommerce_get_product_thumbnail() function doesn’t have an easy hook for adding classes directly to product images.

This functionality would typically involve editing the core WooCommerce template files, but there are ways to achieve the result using WordPress and WooCommerce filters.

Here’s how to add custom classes to product thumbnails without altering core files.

Step 1: Use the wp_get_attachment_image_attributes Filter

One solution for adding classes is to use the wp_get_attachment_image_attributes filter. This filter lets you modify the attributes of the <img> tags created by wp_get_attachment_image, which is indirectly called by woocommerce_get_product_thumbnail. By targeting this filter conditionally, we can restrict our changes to product thumbnails on WooCommerce archive pages.

Add this code to your theme’s functions.php file:

add_filter( 'wp_get_attachment_image_attributes', 'add_custom_classes_to_wc_product_thumbnail', 10, 2 );

function add_custom_classes_to_wc_product_thumbnail( $attr, $attachment ) {
    if ( is_woocommerce() && is_archive() ) {
        $attr['class'] .= ' img-fluid product-thumbnail'; // Add your custom classes here
    }
    return $attr;
}

Explanation of the Code

• Filter Condition: By checking is_woocommerce() and is_archive(), this code limits the added classes to the product thumbnails only on WooCommerce archive pages.
• Adding Classes: $attr['class'] .= ' img-fluid product-thumbnail'; appends custom classes to the existing class attribute, ensuring you don’t overwrite default classes.

Step 2: Alternative Approach – Customize the woocommerce_get_product_thumbnail Function Directly

If you prefer not to use filters, you can override woocommerce_get_product_thumbnail in your child theme by replacing the function with a modified version that includes the extra classes. While not the preferred method (as it may cause issues with WooCommerce updates), this approach is useful if you want more control over the image output.

Here’s how you can override the function:

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
    function woocommerce_get_product_thumbnail( $size = 'woocommerce_thumbnail', $attr = array(), $placeholder = true ) {
        global $product;

        if ( ! is_array( $attr ) ) {
            $attr = array();
        }

        $attr['class'] = isset( $attr['class'] ) ? $attr['class'] . ' img-fluid product-thumbnail' : 'img-fluid product-thumbnail'; // Add custom classes

        $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );

        return $product ? $product->get_image( $image_size, $attr, $placeholder ) : '';
    }
}

Conclusion

Adding custom classes to WooCommerce product thumbnails can be achieved without touching core files by leveraging WordPress’s wp_get_attachment_image_attributes filter. If you need more flexibility, overriding the woocommerce_get_product_thumbnail function in your theme is another option, though it’s less update-friendly. Using these methods allows you to integrate custom classes, like Bootstrap’s img-fluid, seamlessly into your WooCommerce loop layout.