Demo
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.
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 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.
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.
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
Text Fields
Text
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Character Limit
You can set the maximum number of characters to enter on the product page.
Textarea
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Character Limit
You can set the maximum number of characters to enter on the product page.
Number
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
URL
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Option Fields
Checkbox
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Checked by default
Select this option to have the checkbox checked by default.
Value
The entered value is only visible for store admin and displays i.e. in 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.
Multi-checkbox
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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 order edit page if the customer selects that option.
Label
Option label that will be displayed on the product page.
Checked by default
Select this option to have the checkbox checked by default.
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.
Minimum of selected values
Set the minimum number of selections required. Check the "Required field" option in the "General" tab for the following setting to work.
Maximum number of selected values
Set the maximum number of selections allowed.
Select
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
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.
Multi-select
Example of the field type on the product page:
The field options are selected using the cursor and the CTRL button.
Configuration:
Field label
The field label that will be displayed on the product page.
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.
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.
Radio
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
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.
Radio with images
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
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).
Radio with colors
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
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.
Color
Click this button to select a color using a picker.
Picker Fields
Date
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Time
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Use 12-hour clock
Check this checkbox to switch the clock to 12-hour (AM/PM) mode.
Step minute
Enter a value between 1 and 60 to set an interval between minutes to choose from the list.
File Upload
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Selected files limit
Set the limit of files available for upload.
Allowed file types
Select the file extensions available for upload.
Maximum file size in MB
Set the allowed file size available for upload.
Color
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
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.
Other Fields
Heading
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Paragraph
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
Image
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
Upload image
Click this button to select an image.
Image width (in pixels)
Set the width of the inserted image.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
HTML
Example of the field type on the product page:
Configuration:
Field label
The field label that will be displayed on the product page.
Options for advanced users
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 );
