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"  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 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?

CodePudding user response：

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 );