How to get featured image of a product in woocommerce

WordpressWoocommerce

Wordpress Problem Overview


Please tell me where I am going wrong . Product featured image is not showing up.

   $args = array( 'post_type' => 'product', 'posts_per_page' => 80, 'product_cat' => 'profiler', 'orderby' => 'rand' );

	$loop = new WP_Query( $args );

   while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

    <div class="dvThumb col-xs-4 col-sm-3 col-md-3 profiler-select profiler<?php echo the_title(); ?>" data-profile="<?php echo $loop->post->ID; ?>">

    <img src="<?php  get_the_post_thumbnail($loop->post->ID); ?>" data-id="<?php echo $loop->post->ID; ?>">

    <p><?php the_title(); ?></p>
										
    <span class="price"><?php echo $product->get_price_html(); ?></span>                    
    </div>

I have already added a featured image in back end

Wordpress Solutions


Solution 1 - Wordpress

I got the solution . I tried this .

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), 'single-post-thumbnail' );?>
										
	<img src="<?php  echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">

Solution 2 - Wordpress

The answers here, are way too complex. Here's something I've recently used:

<?php global $product; ?>
<img src="<?php echo wp_get_attachment_url( $product->get_image_id() ); ?>" />

Using wp_get_attachment_url() to display the

Solution 3 - Wordpress

I would just use get_the_post_thumbnail_url() instead of get_the_post_thumbnail()

<img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>" class="img-responsive" alt=""/>

Solution 4 - Wordpress

In WC 3.0+ versions the image can get by below code.

$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $item->get_product_id() ), 'single-post-thumbnail' );
echo $image_url[0]

Solution 5 - Wordpress

I had the same problem and solved it by using the default woocommerce hook to display the product image.

while ( $loop->have_posts() ) : $loop->the_post();
   echo woocommerce_get_product_thumbnail('woocommerce_full_size');
endwhile;

Available parameters:

  • woocommerce_thumbnail
  • woocommerce_full_size

Solution 6 - Wordpress

I did this and it works great

<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
<?php } ?>

Solution 7 - Wordpress

get_the_post_thumbnail function returns html not url of featured image. You should use get_post_thumbnail_id to get post id of featured image and then use wp_get_attachment_image_src to get url of featured image.

Try this:

<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 80, 'product_cat' => 'profiler', 'orderby' => 'rand' );

$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
	<div class="dvThumb col-xs-4 col-sm-3 col-md-3 profiler-select profiler<?php echo the_title(); ?>" data-profile="<?php echo $loop->post->ID; ?>">
		<?php $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id($loop->post->ID)); ?>
		<?php if($featured_image) { ?>
		<img src="<?php $featured_image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
		<?php } ?>
		<p><?php the_title(); ?></p>
		<span class="price"><?php echo $product->get_price_html(); ?></span>
	</div>
<?php endwhile; ?>

Solution 8 - Wordpress

This should do the trick:

<?php
    $product_meta = get_post_meta($post_id);
    echo wp_get_attachment_image( $product_meta['_thumbnail_id'][0], 'full' );
?>

You can change the parameters according to your needs.

Solution 9 - Wordpress

WC_Product::get_image() – Returns the main product image.

Usage

$string = WC_Product::get_image( $size, $attr, $placeholder );

Parameters

$size - ( string ) optional default: woocommerce_thumbnail

$attr - ( array ) optional – Image attributes.

$placeholder - ( bool ) optional default: 1 – True to return $placeholder if no image is found, or false to return an empty string.

Returns

string

$product->get_image('thumbnail');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAmar SinghView Question on Stackoverflow
Solution 1 - WordpressAmar SinghView Answer on Stackoverflow
Solution 2 - Wordpressuser11276769View Answer on Stackoverflow
Solution 3 - WordpressAlanView Answer on Stackoverflow
Solution 4 - WordpressNishad UpView Answer on Stackoverflow
Solution 5 - WordpressEddView Answer on Stackoverflow
Solution 6 - WordpressClotilde RodriguezView Answer on Stackoverflow
Solution 7 - WordpressLIMEXSView Answer on Stackoverflow
Solution 8 - WordpressNipunaView Answer on Stackoverflow
Solution 9 - WordpressKazimierz NiewielkiView Answer on Stackoverflow