Add custom fields to WooCommerce Products using ACF

A pretty common request for WooCommerce sites is the need to include additional field inputs on the single product page and output them on the front-end. I’m going to explain how to do this using the excellent Advanced Custom Fields plugin (free version).

There will be a little bit of coding involved but don’t worry, it’s all very straightforward. And there’s the added satisfaction of knowing you can now extend WooCommerce in a powerful way.

I’ll explain a number of different use-cases with examples for each. I’ll be using our Shoptimizer WooCommerce theme but the code snippets should work for any WooCommerce theme.

Let’s get started!

Step 1: Install the Advanced Custom Fields (ACF) plugin

Firstly, download and activate the free version of the Advanced Custom Fields plugin. You can do this within the Plugins section of WordPress if you search for it. Once done, go into the new Custom Fields area in your WordPress dashboard to set one up.

Step 2: Add a custom field group

Within the Custom Fields area click on the Add New button to create a new field group. This is where things get interesting.

We’ll name this field group Single Product (it can be anything). We’ll also change the Location rules to show this when the post type is equal to a Product. Save it at this stage.

3. Create a custom field

So, this sets up our structure. Next, we’ll need to actually include a field. So click the Add Field button.

For this example, let’s say we’re an online book shop and want to include a new Author field which we want to display above the title on the product page. Remember, this is just a demonstration of what you can do. You can change it from author to anything you like.

You can see we now have an Author field created. The field name is simply author – this is important as we’ll be using this shortly. The field type is just a simple Text input also. You can include instructions if you like.

4. Edit a product

Now that an author field has been created, let’s edit a product. Within the editor you should see our new Author text input. Success! This is a good start.

You can add some content to the field and save your product but this new text field won’t be outputted on your site yet.

We’ll look at that next. Are you ready to look at some simple code? I thought so.

5. Display our custom field on the product page

So before we start on the code, a word about where to put this. You should always put custom code in one of two places.

Use a child theme’s functions.php file

We have already prepared a child theme for Shoptimizer you can download and install.

A child theme is uploaded similar to any theme – within Appearance > Themes > Add New. You can add custom code within the functions.php of the child theme. A quick way to do this is within WordPress itself, within the Theme Editor. Appearance > Theme Editor.

Ensure that your child theme is selected and you’re not accidentally editing the parent theme.

Or, use the Code Snippets plugin

Another plugin you say? Well I like the Code Snippets plugin. We use it ourselves on CommerceGurus. It’s a great place to put custom code snippets which you can activate and deactivate whenever you like without any risk that you accidentally break your store.

Create the custom function

To output our new Author field on the single product page, you can use the following code.

It’s fairly simple. Let’s look at this line by line.

We’ve created a new function called shoptimizer_custom_author_field (you can name it anything) and are hooking it into the woocommerce_single_product_summary part of the single product page at position 3.

Where did we get this woocommerce_single_product_summary hook title?

There is an excellent visual guide from Business Bloomer to Single Product hooks which displays all the hooks you can use and what positions they currently occupy. Plus, you can read more about WooCommerce Hooks in our guide.

These are the standard WooCommerce hook positions used for the title, rating, price and introduction text. Note the numbers after each one, these designate the order of the elements.

So the title displays first, then the rating, then the price, then the excerpt text.

Because WooCommerce’s title is in position 5, I’ve made our author custom function position 3, so it will appear before the title.

If we wanted our author text to appear after the title? Yep, you guessed it, you can change the position number to any one of 6, 7, 8, or 9. These will all work.

Let’s look at the rest of the code:

The rest of the function is a simple check to see to see if a field called author exists. Remember, we named this earlier.

If it finds the field it outputs it wrapped in a div which you can style with custom CSS if you wish.

The result looks like the screenshot below. Hurray!

Adding a custom field under the product image

Let’s include another custom field, this time underneath the product image. We’ll use it for review quotes which are often featured on the back of book covers.

So, let’s go back into the Custom Fields area and create a new field which we’ll call Quotes. The field name is a lowercase quotes.

The main difference is that I’ve changed the Field Type to WYSIWYG editor. This will include the full WordPress text editor to allow me to format the content styling.

Now, when I edit a product I’ll see this new field, next to my previously created author text input.

Let’s add some content to this field and save it. It again, won’t display just yet, we’ll need to create a custom function to do so.

The custom code to display this is very similar to what we used for the author text. We can use the following:

As you can see we’re changed references from author to quotes throughout.

Apart from that, the other most obvious difference is the first line:

We want to place this new custom field underneath the existing product image or gallery. Once again, the Single Product Visual Hooks Guide is very useful.

We can see in the guide that this is the existing action which displays the product image gallery thumbnails:

It’s called woocommerce_show_product_thumbnails. And it is hooked into the woocommerce_products_thumbnails area.

So, we’ll use this same woocommerce_products_thumbnails area to display our own custom hook – but with a priority of 30 – so that it displays underneath.

Finally, we’ll add a couple of lines of custom CSS, targeting the cg-quotes class name which we’ve named our div. It can be put into the Appearance > Customize > Additional CSS area for convenience.

Let’s look at the result.

Success! We can see our new quotes field displayed underneath the product gallery. Our custom CSS has centered this and tightened the margins between the paragraphs.

But what if I’m using a product gallery?

While the technique above works fine if you have just a single product image, it won’t work if you’re using the standard WooCommerce gallery. In a strange oversight, WooCommerce’s gallery does not use the woocommerce_products_thumbnails hook area. There isn’t really any method to include content under the gallery, unless you overwrite the product-image.php template.

But! If you are canny enough to be using Shoptimizer and our own superb product gallery, as part of CommerceKit, we have included hooks you can use.

It’s named commercekit_after_gallery and yes, you can also use commercekit_before_gallery too.

Positioning custom fields at the end of the product page

The next thing I’d like to do is a little more complex. I’d like to add an author biography to the bottom of the single product page. That is after the tabs.

The biography will include:

• The author name (we already have that)
• A short bit of text about the author
• A profile photo

Fortunately, our combination of Advanced Custom Fields, a custom function, and a little bit of CSS makes this pretty easy to achieve.

So dive back into your Custom Fields section and add two new fields.

The first, we’ll call Biography and will be a text area. The second we will call Profile Photo. It looks like this:

We’re using an image field for this, and you need to ensure that Image ID is selected beside the ‘Return Format’ heading.

Now, when we edit a product we’ll see these two new fields and can include our biography content within them.

We already have an Author name field from earlier, so that’s everything we need to display a biography section.

The custom function we need is a little more complex as we’ll be incorporating all of these fields as well as some wrapping divs in order to structure the layout.

The first line is of course our hook. Again referencing the Visual hooks guide is the best thing to do as we can see that we should use the woocommerce_product_after_tabs action to place our content after the tabs.

Apart from some wrapping divs the only other new code is used to display our biography profile picture.

We’ll need some more custom CSS to lay this out in a neat fashion and we can use the power of flexbox CSS to do this rather than using floats. It would go into Appearance > Customize > Additional CSS, or the style.css of our child theme.

Depending on your theme you may need to adjust this slightly but it’ll hopefully work with most. After all our effort, this is the result:

We have a really nice author biography section after the tabs on our product pages. A great feature for an online bookstore.

Display a custom field on the shop/catalog

So, we’ve successfully added fields to the single product page. How would we include one of these fields on the Shop page within a product ‘card’. Let’s say that we’d like to include our new Author field underneath the product title.

If we’ve already got our existing function in place:

Then we only need to include one additional line to this. We’ll need one more add_action to also include this on the Shop page.

This now becomes:

You’ll see a new action on the second line.

We’re applying the same code to display the field but in a new location which is woocommerce_shop_loop_item_title.

WooCommerce has more hooks to govern the position of elements on the shop page. Once again, Business Bloomer has another superb visual hook guide for the Shop page which you can refer to.

Looking at that, you’ll be able to see that on a product ‘card’ the regular title position is this:

So our new action uses the same woocommerce_shop_loop_item_title hook but will be positioned after it, in position 15.

To add a little bit of extra styling, I’m also adding a few lines of custom CSS. This can go into: Appearance > Customize > Additional CSS.

Now, when you view your Shop or Category page you should see your ACF field displayed in the product card like so.

Bonus! Using ACF to create custom badges

Based upon what we’ve seen so far, it’s now not too difficult to apply custom product badges to products.

It might be as simple as adding a New label to certain items, or text such as Featured, Highly rated for example.

To do this I will need the following:

• A new Custom badge ACF field which will appear when I edit a product.
• A custom hook to display this badge on the catalog pages.
• Another hook to display it on the single product pages.
• Some CSS to make everything look nice.

So I’ll get started by adding my ACF field called Custom Badge. The field type is a simple Text Field.

Now, when I edit a product I’ll see this new field. So add some example text to this within one of your products so you have a working example. I added the label Best seller! in my example.

Next, I’ll need to add my custom function to display this field in two different locations. The catalog and the single product page.

You can see that my shoptimizer_custom_badge function is being added in the two locations.

Finally, we’ll need some custom CSS to make it look nice. This can go into: Appearance > Customize > Additional CSS.

Now, let’s see the result. The product page looks like this:

The CSS has ensured that it is positioned on top of the featured image. Now, let’s look at the catalog page as you’ll see that it appears there also.

My CSS has positioned it at the bottom of the image, centered. I feel this is the best place for it, as the top section can include a discount label, the wishlist icon and potentially Out of stock text.

Conclusion

We’ve seen that Advanced Custom Fields is a terrific method to extend WooCommerce and add additional fields. This plugin coupled with some simple WooCommerce Hooks can position your new custom fields almost anywhere.

I used an online bookstore example you can of course add any kinds of custom content using these techniques.

Now I’d like to hear from you.

Which of these custom field examples is most useful?

Do you have any great tips on how you are using custom fields on your own store?

Let me know by leaving a comment below right now!

Update! I’ve added an example of using ACF on the product category pages in a new support article for our Shoptimizer WooCommerce theme.