求助：WooCommerce中如何为Silver/Gold角色显示专属产品图片

Hey there! Great job getting those custom Silver/Gold roles and pricing set up—let's fix that image visibility issue for you. I've got a couple of solid, tested methods to make this work, since you mentioned plugins didn't cut it and your custom function attempts fell flat.

First, let's create a reliable helper function to check if a user is in your premium roles—this will make the rest of the code cleaner and easier to maintain:

// Helper function to verify if user is Silver or Gold
function is_premium_user() {
    $current_user = wp_get_current_user();
    // Double-check your role slugs here (match exactly what you created in WP)
    return in_array( 'silver', $current_user->roles ) || in_array( 'gold', $current_user->roles );
}

Method 1: Custom Functions (Recommended) #

This method uses WooCommerce hooks to modify image output directly, no template edits needed. It works for both single product pages and shop/archive pages.

Add these functions to your theme's functions.php file, or use a custom code plugin like Code Snippets (safer than editing theme files directly, as theme updates won't erase your code):

// Hide/replace images on single product pages for non-premium users
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'restrict_single_product_images', 10, 2 );
function restrict_single_product_images( $html, $post_id ) {
    if ( ! is_premium_user() ) {
        // Option 1: Replace with a placeholder image (update the URL to your own placeholder)
        $html = '<img src="' . get_stylesheet_directory_uri() . '/images/premium-placeholder.jpg" alt="Premium Content Only" class="premium-placeholder" />';
        
        // Option 2: Hide images entirely (uncomment below, comment Option 1)
        // $html = '';
    }
    return $html;
}

// Hide/replace images on shop/archive pages for non-premium users
add_filter( 'woocommerce_product_get_image', 'restrict_archive_product_images', 10, 6 );
function restrict_archive_product_images( $image, $product, $size, $attr, $placeholder, $image_src ) {
    if ( ! is_premium_user() ) {
        // Same options as above—use placeholder or hide
        $image = '<img src="' . get_stylesheet_directory_uri() . '/images/premium-placeholder.jpg" alt="Premium Content Only" class="premium-placeholder" />';
        // $image = '';
    }
    return $image;
}

Notes for Method 1: #

• Replace 'silver' and 'gold' with your actual role slugs if they differ (check in WP Admin > Users > Edit a user to confirm the exact slug).
• Upload a placeholder image to your theme's images folder, or use a media library image by swapping get_stylesheet_directory_uri() with wp_get_attachment_url( YOUR_IMAGE_ATTACHMENT_ID ).

Method 2: Edit WooCommerce Templates #

If you already customize WooCommerce templates, this method gives you more control over the layout. First, copy the relevant template files to your theme to avoid losing changes when WooCommerce updates:

1. In your WordPress theme folder, create a woocommerce subfolder.
2. Copy wp-content/plugins/woocommerce/templates/single-product/product-image.php to your-theme/woocommerce/single-product/
3. Copy wp-content/plugins/woocommerce/templates/loop/product-image.php to your-theme/woocommerce/loop/

Now edit the copied files:

For Single Product Pages (product-image.php): #

Wrap the existing gallery code with our premium user check:

<?php if ( is_premium_user() ) : ?>
    <!-- Keep all original gallery code here -->
    <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" id="product-<?php the_ID(); ?>-gallery" data-id="<?php the_ID(); ?>">
        <div class="woocommerce-product-gallery__wrapper">
            <?php
            if ( has_post_thumbnail() ) {
                $html = wc_get_gallery_image_html( get_post_thumbnail_id( $post->ID ), true );
            } else {
                $html = '<div class="woocommerce-product-gallery__image--placeholder">';
                $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
                $html .= '</div>';
            }

            echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, get_post_thumbnail_id( $post->ID ) ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

            do_action( 'woocommerce_product_thumbnails' );
            ?>
        </div>
    </div>
<?php else : ?>
    <!-- Replace with your placeholder or empty content -->
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/premium-placeholder.jpg" alt="Premium Content Only" class="premium-placeholder" />
<?php endif; ?>

For Shop/Archive Pages (product-image.php in loop folder): #

Wrap the image output with the same check:

<?php if ( is_premium_user() ) : ?>
    <div class="woocommerce-loop-product__image">
        <?php
        echo woocommerce_get_product_thumbnail(); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        if ( $product->is_on_sale() ) {
            echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">' . esc_html__( 'Sale!', 'woocommerce' ) . '</span>', $product );
        }
        ?>
    </div>
<?php else : ?>
    <div class="woocommerce-loop-product__image premium-placeholder-container">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/premium-placeholder.jpg" alt="Premium Content Only" class="premium-placeholder" />
    </div>
<?php endif; ?>

Method 3: CSS Hide (Quick, Less Secure) #

If you need a fast fix and don't mind that technically savvy users could view image URLs via source code, you can add a CSS class to products for non-premium users and hide images with CSS:

First add the class via PHP:

add_filter( 'post_class', 'add_non_premium_product_class', 10, 3 );
function add_non_premium_product_class( $classes, $class, $post_id ) {
    if ( get_post_type( $post_id ) === 'product' && ! is_premium_user() ) {
        $classes[] = 'non-premium-product';
    }
    return $classes;
}

Then add this CSS to your theme's style.css or Customizer > Additional CSS:

.non-premium-product .woocommerce-product-gallery,
.non-premium-product .woocommerce-loop-product__image {
    display: none;
    /* Optional: Add placeholder background */
    background: url('/wp-content/themes/your-theme/images/premium-placeholder.jpg') center/cover no-repeat;
    height: 300px;
}

Final Checks: #

• Test with a default customer account, a Silver account, and a Gold account to confirm images show/hide correctly.
• If your custom roles have different slugs, update the is_premium_user() function to match.

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