Installation
Plugin FAQ
Getting Started
The plugin supports two types of products available in WooCommerce - a Simple Product and a Variable Product.
New fields added with Flexible Product Fields are displayed in WooCommerce on the product pages.
The product must have a price, to make the fields appear on its page.
Each product can be assigned to multiple groups and each group can be assigned to a chosen product or product category.
Plugin settings can be found in the menu Products → Product Fields.
To add a new group, click Add New next to the Fields Groups header.
Product page and checkout
All fields appear on the product page in the selected section and order.
Options entered or selected by the customer will be displayed in the cart and checkout similar to the attributes of the variable product. Product price will include the regular price of the product and price options selected.
Additional fields will also be available for admins and shop managers on the orders list and edit order pages.
Fields Groups List
Groups Fields table gives an overview of the configured and active groups and ability to edit, duplicate, delete and search. The table contains the following information:
Title
Group title only serves as an identification of a group for the admin.
Assign to
Information to which product or category the group has been assigned.
Fields
Information about all the fields used in the group.
To hide unnecessary columns, click the Screen Options in the upper right corner of the screen and select the columns.
Edit
To edit a group simply click it's title or hovering over the title area, click the Edit in the quick links menu.
PRO Duplicate
You can copy groups. After hovering over the title area, click Duplicate in the menu of quick links, you will create a copy of a selected fields group.
Trash
You can delete groups individually via quick links or mass selecting group and from Bulk Actions selecting Move to Trash.
To permanently delete a group, select the filter Trash, and then click Delete Permanently.
Search
To search groups type its title in the box in the upper right corner of the screen and click the Search Fields Group.
You can also filter group by Published, Draft - no active groups and located in the Trash.
Fields Group Configuration
To add a new group, click Add New in the upper left corner of the screen.
Enter a title for the group, which will be visible only to store admin.
After configuring fields, save the settings by clicking Publish.
Settings
Settings metabox contains general options for the entire group.
Section
Select where the fields will be displayed on the product page. You can choose one of the two sections:
- Before add to cart button,
- After add to cart button.
Assign this group to
Additional fields can be assigned to:
- selected products,
- PRO selected categories,
- PRO selected tags,
- PRO all products.
After choosing one of the options in the Select... search for a product, category or tag. You can add multiple products, categories and tags to a group.
PRO Order Group
If you want to make a few groups of fields were added to a product you can set the display order of fields in the group.
By default (in the free version) the fields will be displayed by the order of creating groups.
Fields
Add fields in Fields metabox that will be displayed on the product page.
Sort fields using drag and drop, edit by clicking the field title or click Delete to remove the field.
Basic options
Depending on the field type selected, various configuration options will be available.
Label
The field label that will be displayed on the product page.
Field Type
Select the type of field you want to add. Depending on the field type, different configuration options will be available.
Available field types:
- Text
- Textarea
- Number
- Select
- Multi-select
- Radio
- Radio with images
- Checkbox
- PRO Heading
- PRO Date
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
Character Limit
For the Text and Textarea field, you can set the maximum number of characters to enter on the product page.
Placeholder
Placeholder will be displayed as a help in text fields.
Value
The entered value is only visible for store admin and displays i.e. in the the order edit page if the customer selects the one option.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Options
For radio and select fields you can add any number of options. Click Add Option to add new option and trash icon to delete the option.
Following settings are available in the options table:
Value
The entered value is only visible for store admin and displays i.e. in the order edit page if the customer selects that option.
Label
Option label that will be displayed on the product page.
PRO Price type
Choose how to calculate price.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
PRO Date settings
For the Date field, you can set the following parameters:
- Date format - default date format dd.mm.yy eg. 14.04.2014,
- Days before - range of days available in the calendar before the current date,
- Days after - range of days available in the calendar after the current date.
Price
The plugin allows you to increase or decrease the price of the product of the values set for the field.
PRO Price type
For selected types of fields you can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Conditional logic for fields
PRO Conditional logic for fields allows to show field based on values from other fields:
- checkbox,
- radio,
- select.
Choose a way to check the rules:
- all rules match (and),
- one or more rules match (or).
Then add the rule and select the field to set the condition and the condition:
- is,
- is not.
Checkbox will have two options: checked and unchecked.
For radio and select options will be configured manually.
You can add any number of rules.
Field types
Single Line Text
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Text type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk “*” will be displayed next to its name.
Character Limit
You can set the maximum number of characters to enter on the product page.
Placeholder
The placeholder will be displayed as a help inside the field.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
PRO Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Paragraph Text
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Textarea type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
Character Limit
You can set the maximum number of characters to enter on the product page.
Placeholder
The placeholder will be displayed as a help inside the field.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Number
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Number type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
Placeholder
The description will appear as the first option to choose from a dropdown list (e.g. "Select from list"). The option will be inactive and not clickable.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Min value
Values below the minimum value will be rejected due to field validation.
Max value
Values below the minimum value will be rejected due to field validation.
Step value
The interval between consecutive acceptable values.
PRO Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Select
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Select type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
Placeholder
The description will appear as the first option to choose from a dropdown list (e.g. "Select from list"). The option will be inactive and not clickable.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Options
Click Add Option to add new option and trash icon to delete the option. Following settings are available in the options table:
Value
The entered value is only visible for store admin and displays i.e. in the order edit page if the customer selects that option.
Label
Option label that will be displayed on the product page.
PRO Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Multi-select
Example of the field type on the product page:
The field options are selected using the cursor and the CTRL button.
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Multi-select type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Options
Click Add Option to add new option and trash icon to delete the option. Following settings are available in the options table:
Value
The entered value is only visible for store admin and displays i.e. in the order edit page if the customer selects that option.
Label
Option label that will be displayed on the product page.
PRO Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Checkbox
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Checkbox type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
Value
The entered value is only visible for store admin and displays i.e. in the the order edit page if the customer selects the one option.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
PRO Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Radio Button
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Radio type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Options
Click Add Option to add new option and trash icon to delete the option. Following settings are available in the options table:
Value
The entered value is only visible for store admin and displays i.e. in the order edit page if the customer selects that option.
Label
Option label that will be displayed on the product page.
PRO Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Radio with images
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Radio with images type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Options
Click Add Option to add new option and trash icon to delete the option. Following settings are available in the options table:
Value
The entered value is only visible for store admin and displays i.e. in the order edit page if the customer selects that option.
Label
Option label that will be displayed on the product page.
Upload Image
This button adds an image (thumbnail 150 x 150).
PRO Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
PRO Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Heading
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Heading type.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Date Picker
Example of the field type on the product page:
Configuration:
Label
The field label that will be displayed on the product page.
Field Type
Select the Date type.
Required
Checking this option will make the field required. If the field is not completed by the client, an error message appears and he cannot add a product to the cart.
If the field is required, an asterisk "*" will be displayed next to its name.
Placeholder
The placeholder will be displayed as a help inside the field.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Tooltip
The description that will appear when the user hovers the cursor over the [?] icon next to the field label.
Date format
Default date format dd.mm.yy eg. 01.01.2021.
Days before
Range of days available in the calendar before the current date. Enter 0 to exclude past dates in the calendar.
Days after
Range of days available in the calendar after the current date.
Excluded dates
Specific dates that will not be available in the calendar e.g. non-working days. Separate dates with commas and use WP date format e.g. dd.mm.yy.
Excluded days of week
Days of the week that will not be available in the calendar e.g. weekends.
First day of week
The day of the week shown as the first in the calendar e.g. Monday.
Selected days limit
The maximum number of days available for selection in the calendar.
Time of day closing
The closing time of the day e.g. 15:00. Selecting the current date will not be possible after this time is exceeded.
Price type
You can add extra fees that will be added to the product price. You can choose the method of calculating the rates for additional options:
- Fixed - set a fixed price for options,
- Percent - set the percentage of the product price for the option.
Price
Depending on the price type, enter a value in the currency of the store or the percentage to calculate the price based on the price of the product.
Options for advanced users
Adding graphic
Important: This method was the sole option to add graphics until version 1.4.1. With the introduction of the "Radio with images" field it is possible to add graphics using this field and the "Upload Image" button.
You can add graphic using HTML by typing the absolute path in the field label, e.g. <img src="/wp-content/uploads/2019/05/graphic.jpg">
Example of the field type on the product page:
Save product configuration
An additional button "Save product config" is available on the product subpage. It is located above the "Add to Cart" button and it is visible only to the store administrator. The function enables sending to the customer ready product configurations (e.g. via email).
Clicking on the "Save product config" button will save the current configuration of a given product. The configuration will be available in the form of a URL in the browser bar (the address will appear after reloading the page).
Example of the button on the product page:
It is possible to hide the entire container with CSS. Please go to Appearance > Customize > Additional CSS and paste the code below.
div.fpf-fields-config-wrapper {
display:none!important;
}
Data storage location
Data of created product fields and their settings are saved in the database. They can be used for external integration or customization of the plugin.
Field group definitions
The Fields groups are saved in the posts table as fpf_fields. This post type has its additional data in the postmeta table where you can find information about the name of the field and what can be entered inside of it. The record in postmeta will have _fields value entered in the meta_key field. In the post ID you will find post ID of the field group.
Field Values
The values of specific fields, i.e. data entered there by the user, are stored in the wp_woocommerce_order_itemmeta table. They are associated with a specific product by order_item_id and the definition of the specific meta_id field.
Change the label of the price field
It is possible to customize the labels that contain the brackets with the price. Paste the appropriate code into the functions.php file. Make a backup of the file before making these changes.
Adding a plus before a price greater than 0
add_filter( 'flexible_product_fields/field_args/label_price', function( $label, $price_raw, $field ) {
if ( $price_raw > 0 ) {
return '(+%s)';
}
return $label;
}, 10, 3 );
Removing the brackets
Paste the field name in place of field name. The field name is in the field settings under the label name e.g. fpf_5801863.
add_filter( 'flexible_product_fields/field_args/label_price', function( $label, $price_raw, $field ) {
if ( $field['id'] === 'field name' ) {
return '';
}
return $label;
}, 10, 3 );
