How to Use ACF Fields for WooCommerce Product Photos

- 6 comments

By

Development,Projects,Snippets,WooCommerce,WordPress,WordPress Filters

I recently built a custom WooCommerce theme for a client who needed a more consistent looking product catalog. Their previous catalog was distorted, some product photos ended up stretched, and overall the products looked inconsistent and unprofessional. I helped them clean this up by providing them with some strict guidelines for their product photography and I wanted a way to actually enforce some of those guidelines in the WooCommerce admin. I decided to use Advanced Custom Fields for this because it’s flexible, the fields enable a plethora of configurable options, and they enable restrictions by dimensions, file size, and file type.

I wanted my ACF fields to be seamless and very intuitive. For all intents and purposes I wanted to replace the default WooCommerce fields with my ACF fields. So I set out to do just that.

First, I removed the default WooCommerce meta boxes for the Product image and Product gallery:

Then I created my the ACF fields that would take their place. This should be at least an Image field along with an optional Gallery field if your product has variations or multiple photos and you plan to utilize WooCommerce’s product gallery features. My fields are called product_photo and product_gallery respectively. If you’re following along then note these fields names, we’ll use them in a moment.

This project involved an existing store with existing products and existing product photos, so I wanted to be sure that my new custom ACF fields would populate any existing values.

Awesome, now when I go to edit an existing product that already has a product photo, I won’t see the WooCommerce meta boxes with the product photos, but the product photos will display in my custom fields. Looking good so far!
The next step is to ensure that any new values get saved appropriately. I could just save my ACF fields as usual and then dive into the WooCommerce functions that actually retrieve the images and filter or modify those functions to make them grab my ACF fields instead of the images they’re expecting from the WooCommerce meta boxes, but it’s far easier to simply sync my new ACF fields to what WooCommerce is already expecting.
By default, WooCommerce saves the Product image and Product gallery images to the _postmeta table: the main image with _thumbnail_id as an integer (the image’s attachment id), and the gallery gets saved to _product_image_gallery as a comma separated string of attachment ids. So each time I save a Product, I need to grab the values from my ACF image field and ACF gallery field, format them appropriately, and then pipe those values into the product’s metadata. Here’s how I did that:
Woohoo! Now my WooCommerce Products can use ACF fields to populate product photos and the product gallery. This is useful in many scenarios. You could, for example: require WooCommerce product photos on every product; restrict WooCommerce product photos by dimensions; and even restrict WooCommerce product photo file types. Please comment below if you find this useful and if this helped you with a custom admin flow for WooCommerce I would love to hear details about it!

Comments

  2. when I try to copy from acf field to _product_image_gallery with the final code. It’s not working as my acf field type is justified_image_grid. how can I solve this ?

    Reply

  3. I have added the code and custom field and works perfectly. Is there any way to specify the image dimensions or it uses the default settings on woocommerce?

    Reply

Leave a Comment