How to get featured image of a product in woocommerce

Question

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

`$product->get_image( $size, $attr)` – Anand Shah Sep 29 '15 at 07:57 — Anand Shah, Sep 29 '15 at 07:57

Amar Singh · Accepted Answer · 2022-03-17T08:33:38.123

92

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; ?>">

edited Mar 17 '22 at 08:33

answered Sep 29 '15 at 07:38

Amar Singh

5,464
2
26
55

I know this is the accepted answer but, what is the point of the $img_url? This would work with just echoing $image[0] – Tony Hensler Dec 31 '16 at 11:36
2

This solution does not account for the ALT tag or responsiveness. Accessible compliance is huge in the USA and becoming more prominent worldwide. Solutions which only get the image URL and promote an empty ALT tag puts you and your clients at massive risk of accessibility discrimination and potential lawsuits. Please lean on WordPress ( `wp_get_attachment_image( $product->get_image_id(), 'large' );` ) to render the HTML for you, which provides additional wins such as mobile responsiveness (providing multiple image sizes for various browser widths), ALT content and titles. – Stephan Robberts Jul 26 '21 at 11:18
I certainly agree with you, @StephanRobberts. The whole thing could be written as: echo wp_get_attachment_image( get_post_thumbnail_id( $product_id ), [ 30, 30 ] ); – mrwpress Oct 20 '21 at 15:36

score 50 · Answer 2 · answered Jul 11 '19 at 20:41

50

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

answered Jul 11 '19 at 20:41

2

Better to use `wp_get_attachment_image_src` because it always returns an image, also if the attachment is a video, or a pdf. And you can specify size too. Then: `wp_get_attachment_image_src( $product->get_image_id(), 'thumbnail' )[0]` – Kalamun Feb 14 '21 at 22:06

score 17 · Answer 3 · edited May 22 '18 at 20:25

17

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=""/>

edited May 22 '18 at 20:25

Cleptus

3,446
4
28
34

answered May 22 '18 at 15:31

Alan

215
2
8

Best way for WordPress >= 4.4. – kdmitry Apr 14 '19 at 19:25

score 9 · Answer 4 · edited Sep 11 '21 at 08:06

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');

score 8 · Answer 5 · answered Jun 25 '17 at 12:04

8

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]

answered Jun 25 '17 at 12:04

Nishad Up

3,457
1
28
32

score 8 · Answer 6 · answered Aug 07 '20 at 14:02

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

score 5 · Answer 7 · answered Nov 16 '18 at 15:09

5

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 } ?>

answered Nov 16 '18 at 15:09

Clotilde Rodriguez

51
1
2

score 4 · Answer 8 · answered Sep 29 '15 at 07:47

4

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; ?>

answered Sep 29 '15 at 07:47

LIMEXS

181
4

hi limexs i already got the solution ,, but thanks for your answer...can you please tell me if i want to give a data variable to a particular product from back end (woocommerce) than which field should i use (SKU or tag or there something else to add a identifier) . Since this unique identifier i want to use as html data variable... i hope you got my aquestion – Amar Singh Sep 29 '15 at 08:04
Hmm, maybe I don't understand the question. You're already using post_id and I think this is sufficient to identify the product. – LIMEXS Sep 29 '15 at 08:09
limexs: actually i am upgrading a project to woocommerce .. so i need to store another identifier , which is already present in the existing project – Amar Singh Sep 29 '15 at 08:29
alright, got it, you can use custom field for this. – LIMEXS Sep 29 '15 at 08:33
should be – Jesus R Marval P Dec 08 '17 at 06:04

score 4 · Answer 9 · edited Jan 04 '20 at 01:30

4

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.

edited Jan 04 '20 at 01:30

SherylHohman

16,580
17
88
94

answered Oct 11 '16 at 17:41

Nipuna

162
10

2

there's an extra parentheses, wp_get_attachment_image( $product_meta['_thumbnail_id'][0], 'full' ); – Oussama Bouthouri Dec 05 '17 at 13:48

How to get featured image of a product in woocommerce

9 Answers9

Linked