Question 3096 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

ACF Image as Product Feature Image – Woocommerce

How do I set an image that was uploaded via Advanced Custom Fields as the featured image of that woocommerce product only on the single product page?

This is how I set it up:

Step 1: I created an ACF image field with return format of ‘Image Array’. Here’s a screenshot of the settings.

ACF Image field settings

1

Step 2: I created conditional rules to only display the ACF input field on products for a specific category. That works. In the screen shot below you can see the field on the product page with an image uploaded to it.

ACF Image field on product page with uploaded image from media library

2

Step 3: Now this is the part I’m struggling with. I need to replace the woocommerce featured image with the uploaded ACF image when a user views the product page.
The screenshot below shows the product page with the woocommerce featured image but I want to replace that with the ACF image I uploaded in Step 2.

Product page on Front-end shows Woo featured image but I want to replace it with ACF image uploaded in Step 2

3

So I have the snippets plugin enabled where I can add code to swap the product images on the front-end (product page) but I need help with code please.

Any help will be appreciated, thanks!

I’m using OceanWP with WooCommerce.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The answer from Martin worked great. Here's the final code if anyone needs it. It's modified to fallback onto the default woocommerce featured image if the ACF image field is empty.

    function acf_wall_art_feature_image($html, $post_thumbnail_id ) {
    global $product;
    $categories = $product->get_category_ids();

//Get the category id from admin/products/categories/(category_name) URL
if (in_array('30', $categories)):

    //Get_field for ACF field name
    $post_thumbnail_id = get_field('wall_art_featured_product_image');

    //Fallback to woo featured image if no ACF image is set
    if (!$post_thumbnail_id):
        return $html;
    else:
        $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
    endif;

endif;

return $html;
}

add_filter( 'woocommerce_single_product_image_thumbnail_html', 
'acf_wall_art_feature_image',10,2);

  2. 0

    In your ACF field set image to return ID or modify the function bellow if you need array or url value.
    Add the following function to your active theme functions.php file.

    function test($html, $post_thumbnail_id ) {
    global $product;
    $categories = $product->get_category_ids();
    //Change 19 to the category id you need
    if (in_array('19', $categories)):
        //Change get_field to your field
        $post_thumbnail_id = get_field('custom_thumb');
        $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
    endif;

    return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'test',10,2);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search