如何用PHP修改Elementor单产品组件的产品图片并返回自定义内容

Elementor的单产品组件（Single Product Widget）采用独立的渲染逻辑，并没有复用WooCommerce默认单产品模板的钩子体系，所以你使用的woocommerce_after_shop_loop_item_title（仅针对商品循环列表）和woocommerce_single_product_image_thumbnail_html（针对WooCommerce原生单产品页面）钩子，都无法在该组件的主产品图片区域生效。

以下是两种可行的解决方法：

方法一：使用Elementor单产品组件专属图片过滤钩子 #

Elementor提供了专门针对单产品组件缩略图的过滤钩子elementor/widget/single_product/thumbnail/html，可以直接修改图片的HTML输出：

add_filter( 'elementor/widget/single_product/thumbnail/html', 'custom_elementor_single_product_image', 10, 2 );
function custom_elementor_single_product_image( $html, $widget ) {
    // 获取当前产品ID
    $product_id = $widget->get_current_product_id();
    $product = wc_get_product( $product_id );
    
    if ( ! $product ) {
        return $html;
    }
    
    // 自定义图片内容示例：替换为指定URL的图片
    $custom_image_url = get_the_post_thumbnail_url( $product_id, 'your-custom-size' ); // 可替换为自定义图片URL或尺寸
    $custom_html = sprintf(
        '<img src="%s" alt="%s" class="attachment-woocommerce_single size-woocommerce_single" />',
        esc_url( $custom_image_url ),
        esc_attr( $product->get_name() )
    );
    
    return $custom_html;
}

方法二：替换组件的图片渲染逻辑 #

如果需要更深度的自定义（比如添加额外内容、修改图片容器结构），可以直接替换组件默认的图片渲染动作：

add_action( 'elementor/widget/before_render_content', 'override_elementor_single_product_thumbnail', 10, 1 );
function override_elementor_single_product_thumbnail( $widget ) {
    // 确认当前组件是Elementor单产品组件
    if ( 'single-product' !== $widget->get_name() ) {
        return;
    }
    
    // 移除默认的图片渲染方法
    remove_action( 'elementor/widget/single_product/thumbnail/render', [ $widget, 'render_thumbnail' ], 10 );
    // 添加自定义渲染方法
    add_action( 'elementor/widget/single_product/thumbnail/render', 'custom_render_single_product_thumbnail', 10, 1 );
}

function custom_render_single_product_thumbnail( $widget ) {
    $product_id = $widget->get_current_product_id();
    $product = wc_get_product( $product_id );
    
    if ( ! $product ) {
        return;
    }
    
    // 输出自定义的图片区域内容，可自由调整结构和添加元素
    echo '<div class="woocommerce-product-gallery__image custom-product-image-wrapper">';
    echo '<img src="' . esc_url( get_the_post_thumbnail_url( $product_id, 'woocommerce_single' ) ) . '" alt="' . esc_attr( $product->get_name() ) . '" />';
    echo '<span class="custom-image-badge">热销</span>'; // 自定义额外内容示例
    echo '</div>';
}

注意事项 #

• 代码需添加到当前主题的functions.php文件，或自定义功能插件中，避免主题更新导致代码丢失；
• 修改后需清除Elementor和WooCommerce的缓存，确保新代码生效。

内容的提问来源于stack exchange，提问作者Toniq