Get ACF field value from product attribute on WooCommerce single product page

Question

I have made a field to add to the WooCommerce attributes. I have added a picture below for more clearance.

I am trying to display the field on the single product page. I have added the following code to the content-single-product.php template file.

$terms = get_the_terms( $product->id, 'pa_merk');
var_dump($terms);

$image = get_field('afbeelding_merk', $terms->taxonomy . '_' . $terms->slug);

// Display the image if it exists
if ($image) {
    echo '<img src="' . $image . '" />';
} else {
    echo "<p>Foto niet gevonden.</p>";
}

What am I doing wrong?

I tried multiple ways to retrieve the terms taxonomy and slug. But on multiple ways it says NULL. I have tried searching on the internet and asking chatgpt. I have also tried to change the part "$terms->slug" to "$terms->term_id", but that did not help either.

Answer 1

Updated: There are mistakes in your code. Try the following instead:

$product_id = $product->get_id(); // get the product ID
$taxonomy   = 'pa_merk';
$terms      = wp_get_post_terms( $product_id, $taxonomy ); // get the product terms

if ( ! is_wp_error($terms) && ! empty($terms) ) {
    $term = reset($terms); // get the first WP_Term object

    $image = get_field('afbeelding_merk', $taxonomy . '_' . $term->term_id);

    // Display the image if it exists
    if ( ! empty($image) ) {
        echo '<img src="'.isset($image['url']) ? $image['url'] : $image.'" />';
    } else {
        echo "<p>Foto niet gevonden.</p>";
    }
} else {
    echo "<p>Foto niet gevonden.</p>";
}

Or the shorter WooCommerce version:

$taxonomy   = 'pa_merk';
$term_name  = $product->get_attribute($taxonomy); // get attribute term name

if ( ! empty($term_name) ) {
    $term  = get_term_by('name', $term_name,  $taxonomy);
    $image = get_field('afbeelding_merk', $taxonomy . '_' . $term->term_id);

    // Display the image if it exists
    if ( ! empty($image) ) {
        $image = ;
        echo '<img src="'.isset($image['url']) ? $image['url'] : $image.'" />';
    } else {
        echo "<p>Foto niet gevonden.</p>";
    }
} else {
    echo "<p>Foto niet gevonden.</p>";
}

Both should work

Answer 2

According to provided code, to implement required functionality to display ACF plugin custom field of type "image", with return format as "Image Array" in woocommerce template file "content-single-product.php", the following code can be used.

$image = '';
$terms = get_the_terms( $product->id, 'pa_merk');
if(!is_wp_error($terms) && !empty($terms))
{
    foreach($terms as $term)
    {
        $image = get_field('afbeelding_merk', $term->taxonomy . '_' . $term->term_id);
        if($image)
        {
            break;
        }
    }
}
if (isset($image['url']))
{
    echo '<img src="'.$image['url'].'" />';
} else
{
    echo "<p>Foto niet gevonden.</p>";
}

If return format of ACF plugin custom field of type "image" is "Image URL", then, in above code, this line of code:

if (isset($image['url']))
{
    echo '<img src="'. $image['url']. '" />';
}

should be replaced with this line of code:

if ($image)
{
    echo '<img src="'. $image. '" />';
}

It can be checked, if this code works.