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.
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 common, 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.
Advanced Product Fields for WooCommerce uses field groups to add fields to products. A field group is simply used to group several fields together. In our example above, it makes sense to create one field group that houses our 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:
- Via the WordPress admin menu WooCommerce → Product Fields. Use this method 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, 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 this field group is attached to.
- Via each product’s Edit Product screen. Use this method if the fields are unique to that one specific product.
In this tutorial, we’ll dive deeper into the first method because it offers a few more settings that we want to go through.
Add a field group
Via the WordPress admin menu, go to WooCommerce → Product Fields and click Add New. You’ve now created an empty field group.
Each field group has 5 important sections:
- The title section at the top is where you give your product group a name, for easy reference.
- Fields is where you’ll add the actual options that should appear on products.
- The Conditions section is where you can add rules to display the group only on certain products. If you don’t add rules, the fields will be shown on all products.
- The Layout section contains other display settings for the field group.
- The Custom variables section is used for advanced pricing settings. This isn’t something you’ll immediately need during the setup.
Each field group requires a title. It’s just for easy reference and has no other function.
Here you can create and manage a variety of product fields. Clicking the Add Field button will create a new field and add it to the bottom of the list (you can reorder your fields by dragging the order handle). Adding a field will look like this:
Each field requires a type and label. All other options will change depending on the field type. Notice each field will have a generated ID (visible in the top blue bar of each field).
The field type decides what type of input will be shown on your product. We have an array 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.
The field label is a title that will be displayed close to the input field. This will also appear on the cart, checkout, and order pages.
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 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.
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.
You’ve learned how the basics of our plugin work and you can attach fields to products. If something isn’t clear, don’t hesitate to contact us.