How To Add Custom Fields In WooCommerce Products?

Custom fields are a great way to display additional information regarding the products. In this article we are going to share how you can add custom fields in your WooCommerce product pages.

We will achieve this with the help of Advanced Custom Fields plugin developed by Elliot Condon. It has over 1 million active installations which should show it’s popularity to add custom fields.

Steps to add custom fields in WooCommerce Products

1. Install and activate the Advanced Custom Fields plugin.
2. Navigate to Custom Fields -> Add New from your admin dashboard.
3. Click on the + Add Field button.
   
4. Enter a name in Field Label for the field that will appear in the product edit page. We will first add an image field, we will name it Image. Choose the Field Type as Image. In the Return Format choose the Image URL option. You can change the rest settings according to your needs.
   
5. To add more fields you can click on the + Add Field button again. Repeat the process and depending on your field type you will see different configuration options. We are going to add a text field and a radio button. For these fields you can make the respective selections under the Field Type as Radio Button and Text.
6. Scroll down to the Location box. In this box you can select where the Field Group is visible. We will select it as Product, since we want this field group to be visible in products only.
   
7. In the Settings box you can configure additional settings. Most of it can be left to default. For better visibility of the field group in the product editor you can select the Position field to High(after title).
8. Once done click on the Update button. The field group is now created.
9. Edit or add a new product now.
10. Below the title of the product our Custom Field box will be visible. You can start by filling the details in the box. In our case we will start by first uploading the image, adding the Additional details for the product and selecting the type of product.
    
11. Now in the Visual editor paste the below line of code.
    [codeview]<strong>Logo:</strong>
    <img src=”[acf field=’image’]”/>
    <strong>Additional details for the product:</strong>
    [acf field=”additional_details”]
    <strong>Product Used/Fresh:</strong>
    [acf field=”type”]
    [/codeview]
    Note the below code. It can be used by you to display your custom fields.
    [codeview][acf field=””]
    [/codeview]
    Here in between the double quotes the name of the field will come. This can be found in the Edit Field Group page under the Name column.
    
    You have to replace the name in the code above with your own field name.
    As you can see the image field requires a different setting and code then the rest. You just have to replace the image field name to yours and the code will handle the rest.
12. Once you are done, click on the Update or Publish button. Your product now has custom fields.