How to Add WooCommerce Custom Fields Using ACF Plugin

You know that feeling when your WooCommerce product pages just seem... flat? 

You've got great products. They’ve got the basics, like the title, price, and description. But sometimes, they’re just not enough to show off what makes your products special. 

What if you want to show extra details like product specs, sizing charts, or customization options? That’s when we turn to custom product fields.

When we add custom fields to WooCommerce, we're giving shoppers everything they need to hit that 'Buy Now' button with confidence.

It’s also easier to manage your store. With custom fields, you can organize important product details that might otherwise clutter the main description. You can also keep track of specific inventory details, offer product customization options, and so on. 

In this quick guide, we’ll show you how to add WooCommerce custom fields in a way that’s flexible and beginner-friendly. 

Why Add Custom Fields to WooCommerce?

Adding custom product fields can bring a lot of benefits to your WooCommerce store. Let’s take a look at them one by one:

• More product information. Custom fields let you share every bit of info about your products. Specs, care instructions, materials, you name it. And more info means more confident buyers.
• Product personalization. Offer different sizes, colors, or engravings. Custom fields make it happen. Your customers get exactly what they want.
• Increased conversion rates. Detailed product pages lead to more sales. It's that simple. When customers know what they're getting, they're more likely to buy.
• Improved SEO. Search engines love detailed product pages. Use keyword-rich custom fields and watch your rankings climb.
• Upsell opportunities. Suggest add-ons or related products. It's not pushy, it's helpful. And it might just increase your average order value.
• Gather valuable data. Get to know your customers better. Use info from custom fields to improve your marketing strategies and customer segmentation.
• Manage your WooCommerce store easily. Consolidate all your relevant product details in one place. Easily update and manage your products to save time.

How to Add Custom Fields to WooCommerce

There are a few different ways to add custom fields to WooCommerce (be sure to check out our other article for more options), depending on your needs and skill level. One of the easiest ways is to use ACF (Advanced Custom Fields) plugin.

ACF is widely used by WordPressers because it allows you to create and assign custom fields with minimal coding. It supports various field types like text areas, checkboxes, and images. 

With ACF, you can easily add extra product details you might not find in the default WooCommerce setting, like dimensions, material types, or even shipping information. It’s user-friendly, and you don’t need to be a developer to set it up.

You can try ACF’s free version or go for the Pro version to access the advanced features.

Now, follow these steps to learn how to add custom fields to WooCommerce using ACF:

Step 1: Install and Activate ACF

Go to the Plugins section in your WordPress dashboard. From there, select Add New and search for Advanced Custom Fields. Once you find it, click Install Now and then activate the plugin. 

If you bought the Pro version, simply upload the plugin file by clicking on Upload Plugin at the top of the page. After uploading, make sure to activate it as well. 

Step 2: Create a Field Group

Now that ACF is active, go to ACF > Field Groups > Add New. This is where you’ll create a field group.

A Field Group is a collection of custom fields that you’ll assign to your WooCommerce products. 

Now, give your field group a name, such as “Product Details,” to make it easier to manage.

Next, start adding your fields by clicking on the Add Field button. You can choose from several field types, depending on what kind of information you want to collect. 

For example, you might select Text for a field labeled “Material Type.”

Enter the field label and name (no spaces in the name). If needed, set a default value. You can repeat this process to add as many fields as you like. 

Once you’re done, click Save Changes.

Step 3: Assign Fields to Products

Scroll down to the Settings section within the field group editor and open the Location Rules tab. This is where you’ll define where your custom fields will appear. 

Set the rule to display on Post Type > is equal to > Product. Doing so will like the fields to your WooCommerce product listings.

Step 4: Add Information to Your Products

With your fields ready and assigned, go to your WooCommerce product list. You can either edit an existing product or create a new one. 

In the product editing page, you should see your custom fields displayed. For example, if you created a field for “Material Type,” it will appear here. 

Enter the relevant information. For our example, we’ll add "80% Nylon, 20% Spandex" to the “Material Type” field.

Step 5: Display Custom Fields on the Front-End

To display your custom fields on the product page, you’ll need to modify the content-single-product.php file in your WooCommerce theme. Don’t forget to back up your original files before making any changes!

Log in to your hosting control panel and access your theme’s folder using FTP or File Manager. Navigate to public_html/wp-content/plugins/woocommerce/templates and then click the content-single-product.php file to open it.

Next, we’re going to use the code below to display the ACF custom fields. Go ahead and copy it.

<?php
$custom_field_value = get_field('my_field'); // Replace 'my_field' with your actual field name
if ( $custom_field_value ) {
    echo '<div class="custom-field">';
    echo '<h3>Custom Field</h3>'; // Optional heading
    echo '<p>' . $custom_field_value . '</p>';
    echo '</div>';
}
?>

Note: Don’t forget to replace my_field with your actual field name. In our example, we’re going to replace it with material_type.

Now, back to your content-single-product.php file, paste the code just below this line of code:

<?php do_action( 'woocommerce_single_product_summary' ); ?>

Save the changes. 

Please note that if you’re using FTP, you’ll need to re-upload the edited file back to the server. If your hosting panel provides a built-in file editor, all you need to do is save the changes (no need for re-uploading). 

Step 6: Check the Front End

Finally, visit your WooCommerce product page to see the custom field in action. If everything was set up correctly, the custom field you added (in our example, “Material Type”) should now be visible on the product page.

Note: If you're using a block-based theme like Twenty Twenty-Four, this method may not work as expected (in our example, we used the Storefront theme). You need to access the WooCommerce template via the Site Editor to edit the single product page. 

That’s It!

WooCommerce custom fields are not just good for your customers. They're great for your business, too. More info means more engagement, and more engagement often leads to more sales. It's a win-win!

We hope you found this guide helpful. Now go on, start adding those custom fields, and see the difference for yourself.

If you’re creating an online store for the first time, don’t miss our beginner’s guide on how to set up your WooCommerce store. Wishing you the best of luck on your journey!