如何将 class 添加到 WooCommerce 商店和存档页面上的产品图片

Question

Woocommerce 商店和存档页面上的产品图片输出如下所示：

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

我想补充类。我搜索了所有我能想到的地方 class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"，但没有找到。

我尝试添加类和 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>

一开始有效，但我使用了别人写的无限滚动插件，当无限滚动插件加载更多图像时，它不会将类添加到新图像。有什么建议吗？

Answer 1

您可以使用 wp_get_attachment_image_attributes WordPress 过滤器挂钩，这将允许您通过 $attr['class']

添加所需的 class

我添加了3个例子：

将军class
基于条件标签
基于产品(ID)

所以你得到：

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

如何将 class 添加到 WooCommerce 商店和存档页面上的产品图片

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

wordpress

class

woocommerce

hook-wordpress