WooCommerce Swap Main Product Image for ACF Image

WooCommerce Web Store for Online Shopping

My client needed to be able to have a different image on his main product page to that on his shop page.

This was actually not difficult to do. I created a new image field in Advanced Custom Fields as normal. I created it with a return value of image ID.

Create a new image field in ACF

Create a new ACF image field

Create a new directory in your theme

Within my theme directory I created the directories as follows:

Copy the template file

Then I copied the file product-image.php from the WooCommerce plugin directory: wp-content/plugins/woocommerce/templates/single product

WooCommerce Template Directory

Edit the template file

All I had to do in the copied template file was edit one line of code!

The WooCommerce product-image template code

Simply replace this line:

$post_thumbnail_id = $product->get_image_id();

With this line:

$post_thumbnail_id = get_field('single_product_custom_image');

Remember to change the name of the field (‘single_product_custom_image‘) to whatever your ACF image field is called.

That’s it, pretty easy in the end.

© Copyright protected by Copyscape.