Installation
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 all products,
- PRO selected categories.
After choosing one of the options in the Select... search for a product or category. You can add multiple products or categories 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
- select
- radio
- 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.
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.
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.
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.
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.
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.
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.
CSS Class
You can modify the appearance of the fields on the product page by adding your own CSS class.
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.
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.
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.
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.
Adding graphic
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:
