Display a Woocommerce Product Featured Image

Loops & Logic
1

If I want to display the featured image of a woocommerce product from my wordpress website, how would I construct the code using Tangible Loops and Logic?

Below is my code which has the error with the product image not displaying next to the looped information.

Any help would be greatly appreciated.

<Loop type="product" taxonomy="product_cat" terms="165">

<div class="product-display">
    <div class="product-image">
        <img src="{Field featured_image}" alt="{Field title}" />
    </div>
    <div class="product-details">
        <h4><Field title /></h4>
        <div class="shackle-sizes-box">
            <h6>Length in feet</h6>

             <Loop type="product" taxonomy="product_cat" terms=165>
                <a href="{Field url}" class="size-button"><Field name="length_ft" /></a>
            </Loop>
          </div>
    </div>
</div>
</Loop>
2

Maybe you can try to use <Field image /> instead of <Field featured_image />

<img src="{Field image}" alt="{Field title}" />

3

Thank you for the reply. I tried replacing my code with yours, but sadly it did not work either.

4

Could you try the following inside the product loop to see if you can get any image field?

Image: <Field image /><br>
Image ID: <Field image_id /><br>
Image URL: <Field image_url /><br>
Image title: <Field image_title /><br>

These fields should work for any custom post type with a featured image.

If you don’t see any field values, it’s possible that a WooCommerce product’s featured image is stored in a different way than normal custom post types. They’ve been migrating a lot of their data into custom database tables, which require their own specific methods to access the fields.

We’re working on better WooCommerce integration in the L&L Pro plugin, which we’ve started documenting here: WooCommerce | Loops & Logic. It provides additional loop types and fields which often use WooCommerce-specific methods to get the data.

By the way, your code example has a duplicated loop query inside another.

<Loop type="product" taxonomy="product_cat" terms="165">

The inner one can be simplified to:

<a href="{Field url}" class="size-button"><Field name="length_ft" /></a>

That should work since the outer loop is pointing at the same product.

5

Thank you. I will try this out and report back.

6

When I added only
the text above without the remaining text, it worked fine and pulled in the image.

Thank you very much!

7

Sweet, glad it worked. :slight_smile: