WPLake > Blog > WooCommerce custom fields on the product page
  • Deutsch
  • Español
  • Français
  • Italiano

WooCommerce custom fields on the product page

Time to read: 3 mins

-

Plugins Tutorials WooCommerce

-

Updated 19.03.24

Learn how to customize your WooCommerce product template by adding custom fields. It's easy, without custom coding and using only a couple of free plugins.

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

#link copied

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

#link copied

What is a custom field?

#link copied

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

#link copied

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

#link copied
  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

#link copied
  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

#link copied

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, how to work with ACF fields can be read in ACF documentation.

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 plugin to show the custom fields.

Advanced Views plugin 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

#link copied
Create an ACF View and assign your fields
  1. Download and install the Advanced Views plugin.
  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

#link copied

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.

About the Author
Baxter Jones

Working in the web industry for over 15 years gaining experience in design,user experience and web best practices. Has a keen eye for detail and enjoys having a process when working and creating. He thinks WordPress is the best thing since sliced bread and when he’s not behind his computer he’ll be in the garden.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it