Getting Started with Advanced Product Fields for WooCommerce

Once you’ve purchased and installed Advanced Product Fields, it’s time to set it up. In this article, we’ll explain some important aspects & terminology before diving into setting up the plugin.

Table of content

In this article, you’ll learn:

• The different ways you can add fields to products.
• Adding your first field to a product
• Changing plugin settings

The Basics

Advanced Product Fields for WooCommerce is a WordPress plugin which allows you to add extra options (also called “fields” or “add-ons”) to your WooCommerce products. It allows you to add a form with input fields that your shoppers can complete before adding the product to their cart.

Moreover, the fields can have advanced functionality such as (dis)appearing based on the value of previous fields, or changing the total product price.

A simple example is adding gift-wrapping options to your product. It could be a simple checkbox asking your user “Do you want this product gift-wrapped?“. When checked, a select list appears asking your user what color of wrapping paper they prefer. If they denoted they want their product gift wrapped, a fee of $2 is added to the total product price.

Field Groups

Advanced Product Fields for WooCommerce uses field groups to add fields to products. A field group is a term used to group several fields together. For the example image above, it makes sense to create one field group that contains the two fields, as they belong together and won’t be shown anywhere else separately.

Adding fields to products

There are two methods of adding fields to a product, each with their advantage:

1. Via the WordPress admin menu WooCommerce → Product Fields. This method allows you to add fields to multiple products in bulk.
2. Via each product’s Edit Product screen.

So which method should you pick?

Add fields via WooCommerce → Product Fields if you are planning to create fields that should appear (identical) on multiple products. For example, you may want to add a gift-wrapping checkbox to all products in the ‘gifts’ category. This method allows you to create a field group once and assign it to multiple products in one go (in bulk), greatly reducing the setup time. If you want to make changes to your fields later on, you only have to make the changes once and they’ll automatically be applied to all products these fields are attached to.

Create fields via the Edit Product screen if they are unique to that product only.

A note about performance

The more field groups you create via WooCommerce → Product Fields, the more work the plugin has to do. For example, when your user visits a product page, the plugin has to fetch all field groups from the database and filter which ones should be shown on that specific product page.

This means, the fewer field groups you have, the better. Though, WordPress can easily handle a lot, so this is rarely going to be an issue. We’ve built our plugin with speed in mind so we’ve minimized the impact on your page load (with success!)

Adding your first field to a product

In this document, we’ll dive deeper into the first method (WooCommerce → Product Fields) because it offers a few more settings that we want to go through.

Via the WordPress admin menu, go to WooCommerce → Product Fields and click Add New. You’ve now created an empty field group. Below, we’ll go over each section of the Field Group screen, so you know what you’re looking at.

Each field group has 5 important sections:

1. The title section at the top is where you give your product group a name, for easy reference. This is only for internal use, customers will never see this title.
2. Fields is where you’ll add the actual fields (product options) that should appear on products.
3. The Conditions section is where you can add rules to display these fields only on certain products. If you don’t add rules, the fields will be shown on all products.
4. The Layout section contains display settings for the field group.
5. The Custom variables section is used for advanced pricing settings. This isn’t something you’ll immediately need during the setup, so you can forget about this for a bit.

Let’s quickly go over each section below in a bit more detail.

Title

Each field group requires a title. It’s just for easy reference and has no other function.

Fields

Here you can create and manage a variety of product fields (also commonly called “product options”, “product addons”, or “form input fields”).

Creating your first product option: a text input field

Click the Add Your First Field button to create a new field:

Notice a new field appears, with a few default settings:

Each field has the following settings:

• Type: the field type decides what type of input will be shown on your product. We have an variety of options such as a select list, checkboxes, image swatches, file upload, and more. There are also types that don’t require user input, but can just be used for layouting or adding extra information to your product. Examples are a section, image, or paragraph. We keep a complete list of available field types and examples here.
  
  To continue this simple tutorial, set the type to Text, which will add a simple single-line text input field.
• Label: the field’s title that will appear close to the field. This label will also be used in the cart, checkout, and order pages so make sure it is filled out and describes your field well.
• Instructions: additional text that will appear below the field to give your users additional instructions if needed.
• Required: is this field required? If it is required, the customer must enter data/select an option before they can add the product to their cart. A validation error will be shown if the option is required but not selected.

All other settings can be used to further customize your field. Depending on the field type you selected, you’ll see different settings.

Notice each field will have a generated ID (visible in the top blue bar of each field). You may need it if you’ll write complex pricing formulas (more on that later).

Show or hide fields depending on values of other fields

A common use case might be to hide options and only show them when necessary. This helps keep your product pages as clean as possible and does not overwhelm your users.

This is why our plugin allows you to show/hide fields based on values of other fields. In our example, we only want to show the field “Which color of wrapping paper would you like?” if the user has selected “This product is for a gift”.

To do that, each field has a Conditionals setting:

In this setting, you can add various rules when to show this field. Start by clicking Add new rule group. A rule group contains 1 or more rules which all have to be true before this field is shown. In the example below, we created a rule to show this field when “Is this product a gift?” is checked:

If you need more information on how field conditionals work, we have a complete tutorial here.

Conditions

In this section, you can add rules to define on which products your fields should be displayed. Note that if you’re adding your field group via the second method (product edit screen), you won’t see this section as it is unnecessary.

You can add rules to only show the fields for products of a certain category, or you can mix & match rules for more complex setups.

This section effectively allows you to create your fields once and assign them to multiple products in one go. Even better: if you’re assigning the field group to a product category, tag, attribute, or variation, this will also work for future products you create. So you can “set it and forget it” and it will work for all products within that category, now and in the future!

Layout

This section controls various layout settings within the field group: whether you want the main product image to change, or change the how your field labels should appear.

Custom variables

As mentioned before, this section is used if you want to add advanced pricing options to any of your fields. Most likely, you don’t need this now but in case you want to read up on it, we have documentation about it here.

Changing plugin settings

Aside from field-specific settings, our plugin also includes global settings that allow you to modify its behavior. To find these settings, go to WooCommerce → Settings → Product fields:

These settings allow you to change wording and behavior of different parts of the plugin.

What’s next?

You’ve learned how the basics of Advanced Product Fields work and you can attach fields to products. What’s next? You can:

• Learn about all the different field types.
• Find out where extra product information is stored when customers place an order.
• Learn how to show or hide fields depending on values of other fields (conditional logic).
• Learn how to increase or decrease the final product price through extra options.

If something isn’t clear, don’t hesitate to contact us.