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_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.
_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: