WooCommerce product images not showing

If WooCommerce product images are not showing on your website, there could be several reasons for this issue. One common reason is that the product image size settings in WooCommerce are not configured correctly. To fix this, you can use the woocommerce_get_image_size filter to modify the image size settings.

Here’s an example code snippet that demonstrates how to modify the WooCommerce product image size settings:

function wpsnippets_modify_product_image_sizes( $size ) {
    // Change the image dimensions as per your requirements
    $size['width']  = 800;
    $size['height'] = 800;
    $size['crop']   = 1; // Enable cropping if needed

    return $size;
}
add_filter( 'woocommerce_get_image_size_single', 'wpsnippets_modify_product_image_sizes' );
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'wpsnippets_modify_product_image_sizes' );

In the above code, we are using the woocommerce_get_image_size_single and woocommerce_get_image_size_gallery_thumbnail filters to modify the product image size settings for the single product page and the product gallery thumbnails, respectively. You can adjust the width, height, and crop values as per your requirements.

By using this code snippet, you can ensure that the product images are displayed correctly on your WooCommerce website.

Examples

Example #1: Troubleshooting missing WooCommerce product images

This example demonstrates how to troubleshoot and fix the issue of WooCommerce product images not showing on the frontend.

/**
 * Fix missing WooCommerce product images.
 */
function wpsnippets_fix_missing_product_images() {
    add_filter( 'wp_get_attachment_image_src', 'wpsnippets_custom_product_image', 10, 4 );
}

/**
 * Custom product image function.
 *
 * @param array|false $image      Either array with src, width & height, icon src, or false.
 * @param int         $attachment Image attachment ID or 0.
 * @param string      $size       Registered image size name, or flat array of width & height values.
 * @param bool        $icon       Whether the image should be treated as an icon.
 * @return array|false Array with image attributes or false on failure.
 */
function wpsnippets_custom_product_image( $image, $attachment, $size, $icon ) {
    global $post;

    if ( ! is_product() && ! is_single() ) {
        return $image;
    }

    if ( ! $image && $attachment && $size === 'shop_single' ) {
        $product = wc_get_product( $post->ID );
        $image   = $product->get_image( $size );
    }

    return $image;
}

This code example provides a solution to the problem of missing WooCommerce product images. It includes a custom function wpsnippets_fix_missing_product_images that hooks into the wp_get_attachment_image_src filter. The wpsnippets_custom_product_image function checks if the current page is a product or single post page, and if the image is missing for the specified size (shop_single), it retrieves the product image using the get_image method from the WooCommerce product object. This ensures that the product image is displayed correctly.

Example #2: Regenerating WooCommerce product thumbnails

This example demonstrates how to regenerate WooCommerce product thumbnails to fix missing or broken product images.

/**
 * Regenerate WooCommerce product thumbnails.
 */
function wpsnippets_regenerate_product_thumbnails() {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }

    set_time_limit( 0 );

    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => -1,
    );

    $products = new WP_Query( $args );

    if ( $products->have_posts() ) {
        while ( $products->have_posts() ) {
            $products->the_post();
            wc_delete_product_transients( get_the_ID() );
            wc_delete_product_thumbnail( get_the_ID() );
            wp_update_attachment_metadata( get_post_thumbnail_id(), wp_generate_attachment_metadata( get_post_thumbnail_id(), get_the_ID() ) );
        }
    }

    wp_reset_postdata();
}

This code example provides a way to regenerate WooCommerce product thumbnails. The wpsnippets_regenerate_product_thumbnails function checks if the current user has the capability to manage options, and then proceeds to query all products using WP_Query. For each product, it deletes the product transients, product thumbnail, and updates the attachment metadata to regenerate the thumbnails. This ensures that any missing or broken product images are regenerated.

Example #3: Checking for missing WooCommerce product images in a loop

This example demonstrates how to check for missing WooCommerce product images within a loop and display a fallback image if necessary.

/**
 * Check for missing product images and display fallback.
 */
function wpsnippets_check_missing_product_images() {
    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();

            if ( has_post_thumbnail() ) {
                the_post_thumbnail();
            } else {
                echo '<img src="' . esc_url( wpsnippets_get_fallback_image_url() ) . '" alt="Fallback Image">';
            }
        }
    }
}

/**
 * Get fallback image URL.
 *
 * @return string Fallback image URL.
 */
function wpsnippets_get_fallback_image_url() {
    return 'https://example.com/fallback-image.jpg';
}

This code example demonstrates how to check for missing WooCommerce product images within a loop and display a fallback image if necessary. The wpsnippets_check_missing_product_images function checks if the current post has a featured image using has_post_thumbnail, and if it does, it displays the image using the_post_thumbnail. If the post does not have a featured image, it displays a fallback image using the wpsnippets_get_fallback_image_url function. This ensures that a fallback image is shown when a product image is missing.