WPLake > Learning Hub > How To Add Custom Fields to WooCommerce Product Page
  • Deutsch
  • Español
  • Français
  • Italiano

How To Add Custom Fields to WooCommerce Product Page

Learn how to improve the default Woo product page with custom fields for added information, leveraging ACF and Advanced Views for seamless display solutions.

Key Points at a Glance

  1. Product Page Essentials: The WooCommerce product page typically displays essential data like title, image, description, price, etc., but not custom fields.
  2. Customizing Product Pages: Adding extra information to product pages is crucial for various purposes like affiliate programs or enhancing visitor engagement.
  3. Using Custom Fields: Custom fields serve as a means to store additional data about products, and they're pivotal in enhancing product pages.
  4. Plugin Choice: Advanced Custom Fields (ACF) is a popular choice for managing custom fields, offering flexibility and ease of use.
  5. Displaying Fields: Displaying custom field values on the product page requires either PHP coding or utilizing plugins like Advanced Views for shortcode-based solutions.
  6. Concluding Remarks: Leveraging plugins like ACF and Advanced Views makes adding and displaying custom data on WooCommerce product pages hassle-free and extends their utility beyond just WooCommerce tasks.

Table of Contents

This article was created to help beginners that are new to WooCommerce and product templates. We'll show how to customize the product template and add custom fields to your WooCommerce products.

Overview

The WooCommerce product page usually displays the product data such as title, image, image gallery, short description, long description, price, and discount. And if there are attributes and variations. But not custom fields.

Crafting the product page by adding extra information is essential, whether you're running an affiliate program using a WooCommerce affiliate plugin or attracting visitors solely by yourself.

There are a few ways to accomplish this goal, and you’ll see that displaying custom field values on a product single page is quite straightforward, and doing it without editing too much code.

This article covers adding custom fields only to the WooCommerce Product page. If you're also interested in adding fields to the Shop overview page, read how to display ACF fields on the Woo shop page.

Below we attached a video tutorial that will show how to reach it. But feel free to skip the video, as in the article below we provide a full step-by-step tutorial in the text version.

Tutorial

What is a custom field?

Custom fields are a great way to store extra data about a Post or Product. By the way, the Product technically is also a post, just with a different type.

Choose a plugin for WooCommerce custom fields

As you may already know, finding the right plugin is often an arduous journey. But don’t let this stop you from building your plugin tool kit.

Advanced Custom Fields (ACF) is one of the most popular meta field plugins available on the market. So in this tutorial, we’ll use ACF, but if you've opted for another one, don't worry, as the steps are quite similar for all of them.

Create an ACF Field Group and set location to post type product

Creating Custom Fields

  1. Download and install the Advanced Custom Fields plugin.
  2. Visit the 'Custom Fields' tab in the backend Admin menu.
  3. Click on ‘Add New’ to add a new Field Group.
    Note: Field groups are there to help you organize your fields into groups.
  4. You’re now presented with the ‘Add New Field Group’ screen where you can add fields.
  5. Use the ‘Add Field’ button to add a field, then fill in the label and a lowercase field name and select type ‘Text’ from the dropdown.
  6. Location, select Show this field group if Post Type is equal to Product. 
  7. Select other ‘Settings’ you may want. Click ‘Publish’.
  8. For more fields just keep using the ‘Add Field’ button.

Pro tip: using the ACF Relationship field you can create a 'connection' between the specific product and any other posts or CPT items. E.g. you can assign a company CPT item, and later display company's data on the product page.

That’s all you need to do to create the fields. So as the next step, you need to add custom field values to your product(s).

Fill the field values on the product page.

Setting up field values

  1. Visit the ‘Products’ tab in the backend Admin menu.
  2. In the list of products, select the product you’d like to edit to fill the values of your custom fields.
  3. Once on the edit product screen, scroll down until you see the custom field(s).
  4. Enter the custom field values. Click ‘Update’ to save the product.
  5. Keep doing these steps until you’ve added the custom field values to all your products.

Pro Tip: Setting a default value in your ACF Field group won’t automatically fill the custom field values for all your products. So you would need to edit the product and click ‘update’ for each product.

It’s time to show the fields on the product page.

Displaying field values on the Product page

Unfortunately, neither WooCommerce nor the ACF plugin come with a way to actually show the field values on the front end of your website. But any good WordPress developer must know how to amend the Woo product page template. So let's dive in.

For the pros and tech-savvy readers: modify and add PHP code to get and display these fields using the ACF get_field() function.

However, there’s another way. It means using some plugin that will do it instead of us. In our case, we'll use the Advanced Views framework to show the custom fields.

Advanced Views framework introduces smart templates, which give a way to display Posts and their ACF fields anywhere on your site using shortcodes. This means you no longer have to write any PHP code to query posts, get field values, or display them! Read how to display ACF fields without coding to know all benefits of the shortcode approach.

How to use Advanced Views to display custom field values on product pages

Create an ACF View and assign your fields
  1. Download and install the Advanced Views framework.
  2. Click ‘Add New’ to add a new View.
  3. You’re now presented with the ‘Edit ACF View’ screen.
  4. Give your View a title and short description, so you can easily find it later.
  5. Fields, Group, select the field group that you created earlier.
  6. Field, select the field, and give it a label.
  7. Click ‘Add Field’ and repeat step 6 until you’ve added all the fields. 

Tip: Use the row handle to reorder fields.

For repeater field type; Switch the tab to ‘Repeater Sub Fields’, Sub Field, select your repeater field, then give it a Label. So now we've reached the final steps.

  1. Click ‘Update’ to save your View.
  2. Copy the shortcode.
  3. Connect to your server via FTP and navigate to your WordPress directory, then go to wp-content/plugins/woocommerce/templates/ and copy 'single-product' folder to your theme inside a new folder called ‘woocommerce’ (so the path is wp-content/themes/your-theme/woocommerce/)
  4. In your WordPress admin backend, visit Appearance > Theme File Editor.
  5. In the top right select theme to edit -> select your-theme then go to woocommerce/single-product/short-description.php to open it in the editor window.
  6. Insert the shortcode by copying and pasting the code below to the bottom of your files contents and replacing the “ID” with your ACF View ID. <?php echo do_shortcode( '[acf_views view-id="ID"]' ); ?>
  7. View your product page to see the result.

Note: if you don’t see the custom fields on the frontend, edit the product and make sure that you’ve filled the custom fields with values.

Edit your WooCommerce template file and insert your ACF View shortcode.

Conclusions

You've learnt how to easily add custom fields to the WooCommerce product page. We used only a couple of free plugins but they made our task easy.

The Advanced Custom Fields plugin is amazing and allows manage meta fields as easily as it's possible. Using the Advanced Views addon you won't have any issues with displaying fields on the front of your website anymore.

Also, it's worth to be mentioned that these plugins are very useful not only regarding Woo tasks. You can use them anywhere, to add and display custom data, i.e. fields for any page or any Custom Post Type.

Was this article helpful?

Totally useless

Slightly helpful

Very helpful

FAQ mode

/

Learning mode

  1. What are custom fields, and why are they important for WooCommerce product pages?

    Custom fields are additional data fields that can be added to WooCommerce product pages to provide extra information beyond the standard product details. They are important for enhancing product pages with specific details or attributes.

  2. How can I display custom field values on the front end of my website?

    There are two methods: manually modifying the WooCommerce template files to display field values using PHP code, or using a plugin like Advanced Views to generate shortcodes for displaying fields without coding.

  3. Can custom fields be displayed alongside product descriptions and other standard product details?

    Yes, by integrating custom field values into the WooCommerce product page template, you can display them alongside standard product details like descriptions, images, and prices.

  4. Can I use the same approach to add and display custom data on other pages or custom post types?

    Yes, the plugins mentioned in the article, such as ACF and Advanced Views, can be used to add and display custom data not only on WooCommerce product pages but also on any page or custom post type within WordPress.

Course navigation: WooCommerce Plugin

Content links (13)

About the Author

Baxter Jones

With over 15 years of experience in the web industry, I specialize in design, user experience, and web best practices. I have a keen eye for detail and thrive on following a structured process in my work. I’m passionate about WordPress, considering it the best innovation since sliced bread. When I’m not at my computer, you’ll find me enjoying time in the garden.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it