Linking external images within – product grid, product slider or product list

Hi,
Thank you for your patience and the link to your site, I was able to show the custom field product images (thumbnail_image) on the shop page with this function in your child theme functions.php:

    function custom_thumbnail_display() {
        global $product;
        
        // Get the "thumbnail_image" custom field value
        $thumbnail_image_url = get_post_meta( $product->get_id(), 'thumbnail_image', true );
        
        if ( ! empty( $thumbnail_image_url ) ) {
            // If the custom field has a value, display that image
            echo '<img class="bcs-thumbnail" src="' . esc_url( $thumbnail_image_url ) . '" alt="' . esc_attr( $product->get_name() ) . '">';
        } else {
            // Otherwise, display the default WooCommerce placeholder image (optional, as WooCommerce will handle it)
            echo wc_placeholder_img();
        }
    }
    add_action( 'woocommerce_before_shop_loop_item_title', 'custom_thumbnail_display', 10 );

and then I added this css to remove the duplicate woocommerce-placeholder.png when the custom field product image is shown on the shop page

.woocommerce-shop .product .woocommerce-LoopProduct-link .bcs-thumbnail ~ .thumbnail_container {
	display: none;
}

So now the result is:

Since you are using the BCS BatchLine Book Importer plugin, the single custom field product main image is shown (main_image) by the plugin, if someone was not using this plugin the custom field product main image could be shown with this function:

//for the single product main image
function custom_single_product_image_html( $html, $attachment_id ) {
    global $product;
    
    // Get the "thumbnail_image" custom field value
    $thumbnail_image_url = get_post_meta( $product->get_id(), 'main_image', true );
    
    if ( ! empty( $thumbnail_image_url ) ) {
        // If the custom field has a value, return that image as the main product image
        $html = '<img src="' . esc_url( $thumbnail_image_url ) . '" alt="' . esc_attr( $product->get_name() ) . '">';
    }
    
    return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'custom_single_product_image_html', 10, 2 );

perhaps this will be helpful to someone in the future.
Please check your site and let us know if you find this working as my screenshots above, so we can close this thread :)

Best regards,
Mike

Hi,

Glad we could be of help! Thank you for the kind words. If you have any further questions, please feel free to open another thread and we will gladly try to help you.

Thank you for using Enfold.

Best regards,
Ismael