How to add class to product image on WooCommerce shop and archive pages

Question

The output of an product image on Woocommerce shop and archive pages looks like:

<img src="http://localhost/wp-content/uploads/2022/02/long-sleeve-tee-2-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="http://localhost/wp-content/uploads/2022/02/long-sleeve-tee-2-300x300.jpg 300w, http://localhost/wp-content/uploads/2022/02/long-sleeve-tee-2-100x100.jpg 100w, http://localhost/wp-content/uploads/2022/02/long-sleeve-tee-2-500x500.jpg 500w, http://localhost/wp-content/uploads/2022/02/long-sleeve-tee-2-150x150.jpg 150w, http://localhost/wp-content/uploads/2022/02/long-sleeve-tee-2-768x768.jpg 768w, http://localhost/wp-content/uploads/2022/02/long-sleeve-tee-2.jpg 801w" sizes="(max-width: 300px) 100vw, 300px" width="300" height="300">

I would like to add classes. I've searched everywhere I can think for class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" with no luck.

I tried adding the classes with jQuery:

<script>
'use strict';
( function( $ ) {

    <?php if (is_shop()):  ?>
    // Add classes to the img tag
    $('.attachment-woocommerce_thumbnail').addClass('w-full md:h-96 sm:h-auto object-cover');
    <?php else: ?>
    $('.attachment-woocommerce_thumbnail').addClass('w-full object-cover 2md:h-96');
    <?php endif ?>
} )(jQuery);
</script>

Which, works at first, but I use a infinite scroll plugin someone else wrote, and it does not add the classes to the new images when the infinite scroll plugin loads more images. Any advice?

Answer 1

You can use the wp_get_attachment_image_attributes WordPress filter hook, which will allow you to add the desired class via $attr['class']

I have added 3 examples:

1. A general class
2. Based on conditional tags
3. Based on product(ID)

So you get:

/**
 * Filters the list of attachment image attributes.
 *
 * @since 2.8.0
 *
 * @param string[]     $attr       Array of attribute values for the image markup, keyed by attribute name.
 *                                 See wp_get_attachment_image().
 * @param WP_Post      $attachment Image attachment post.
 * @param string|int[] $size       Requested image size. Can be any registered image size name, or
 *                                 an array of width and height values in pixels (in that order).
 */
function filter_wp_get_attachment_image_attributes( $attr, $attachment, $size ) {
    // 1. Add general class to the existing classes (use = versus .= to overwrite the existing classes)
    $attr['class'] .= ' my-class';

    // 2. Returns true when on the product archive page (shop).
    if ( is_shop() ) {
        // Add class
        $attr['class'] .= ' my-class-shop';
    } else {
        // Add class
        $attr['class'] .= ' my-class-not-shop';
    }

    // 3.1 Specific product ID
    if ( $attachment->post_parent == 30 ) {
        // Add class
        $attr['class'] .= ' my-class-for-product-id-30';
    }

    // OR

    // 3.2 Specific product ID
    $product = wc_get_product( $attachment->post_parent );

    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        if ( $product->get_id() == 815 ) {
            // Add class
            $attr['class'] .= ' my-class-for-product-id-815';
        }
    }

    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'filter_wp_get_attachment_image_attributes', 10, 3 );