This document covers the installation and use of WooCommerce Extra Product Options plugin, and reveals answers to common problems and issues. We encourage you to read this document if you are experiencing any difficulties. The plugin also comes with several other features, which will also be discussed in corresponding articles.
Customize the Product Page with New Fields
Using this plugin you can add WooCommerce Product Fields. You can perform the following operations to the fields using the Extra Product Options plugin:
- Add New Fields and Sections
- Edit Existing Fields and Sections
- Removing Fields
- Enabling/Disabling Fields
- Change Display Order of the Fields
- Set a display position for fields in three different positions
- Reset To Default Settings
You can access WooCommerce Extra Product Options settings page via Dashboard → Products → Extra Product Option.
You can perform the following operations to the fields using the Extra Product Options plugin:
Always click on the 'Save Changes' button to save your changes.
How to Add New Fields
To add a new field first, go to one of the Section (Initially only one section named 'Default' will be available to start working on) where you want to add the field, and then click the ‘Add Field’ button. It will open-up a popup form where you can set the name and other properties of the custom field that need be added.
Fill the form and click on the ‘Add New Field’ button. Finally, click on the ‘Save Changes’ button so that the new changes take effect.
- Field Properties
For each field you need to define the properties. Correct selection of the properties defines the appearance and functionality of the field. All the properties available for the fields are listed below. Depending on the field type selected, the properties of the field may change.
- Name: The name property specifies the unique name of the field, which is used as the meta key to save value internally in database. This will NOT be displayed on product page. Name must be unique. eg 'collar_type'
- Type: This is the property that allows you to choose the type of the field that need to be added. It could be text, password, textarea, select, checkbox, radio etc.. Based on the 'Type' selected, the field properties displayed may change. These custom types are supported,
- Text– Standard text input.
- Password– Password text input.
- Textarea– A textarea field.
- Select– A dropdown/select box where a single option can be selected. Requires an option set.
- Multi-select– A multi-select box where multiple options can be selected. Requires an option set.
- Radio– A set of radio input. Requires an option set.
- Checkbox– A checkbox field.
- Heading– A label field used as a heading of a section. Heading will be useful to group fields by giving a heading to the section.
- Label– A label used to display normal text. Can be used to give additional helpful tips or directions to the user.
- Default Value: You can assign a default value for the field by providing the value here. This value will be shown as the default value when the product page is loaded.
- Placeholder: The placeholder property is a short hint (a sample value or a short description of the expected format) that describes the expected value of the input field. For example, for an email field the expected format firstname.lastname@example.org can be displayed. The short hint is displayed in the input field before the user enters a value and will disappear once start typing in the field.
- Validations: Choose validation rules that should be applied to the input field. Email, Phone and Number are supported out-of-the-box. You can define your own validation rules in the Advanced Settings section. Any validation rule defined in the Advanced Settings will appear in the select box.
- Input Class: Add a CSS class for the field as the input class. You may need to define the styles for this class in your stylesheet.
- Wrapper Class: Apply a style to the container that wraps the input field and the corresponding label. Apply styles to input fields and their labels separately using the Input Class and Label Class attributes.
- Max Length: This property specifies the maximum number of characters that can be entered in the field by the shopper.
- CSS Class: In case you want the input field to be styled differently, you can add a css class for the field. You may need to define the styles for this class in your stylesheet.
- Price: In case you need to increase or decrease the product price based on the user input in the product page you can do so using this field. For example, if you want to add a checkbox in the product page where the user can select an add-on service and add a 20$ to the product cost for providing that extra service, you may use this property. Provide a negative (-ve) value if you want to give a discount. If the field type is ‘Select’, you can define a price for each option value in the Select box.
- Price Type: Following are the available price types:
- Fixed: A predefined price adds to the total.
- Custom: An amount entered by the shopper (for eg: Donations) will be added to the total price.
- Percentage of Product Price: A specific percentage of the product price adds to the total price.
- Dynamic: A price per unit will be assigned, where the total price as per the units entered by the shopper will be added to the total price.
- Dynamic -Exclude base price: A price per unit excluding the base price will be assigned, where the total price as per the units entered by the shopper will be added to the total price.
- Required: If you select this option (checkbox) the field will be shown as a required field in the product page. If a value is not entered or selected for this field a warning will be displayed.
- Enabled: By default, this property will be selected and the field will be enabled. If you want to disable the field you need to deselect the checkbox. A disabled field will not be displayed on the product page. It will be kept in the field list of Plugin settings on the admin side in case you need to enable it again in the future. Use the remove button if you want to remove a field permanently.
- Title: Label/Title is the display name for the input field which will be shown on the product page. This will also be displayed on the Cart, Email, Checkout Page, Order Details Page etc based on admin choice.
- Title Position: Choose a title position that should be applied to the input field. Left of the field and above field are supported out-of-the-box.
- Title Type: It defines the type of HTML tag for this field.
- Title Color: Use the colour picker to give colour to the Title.
- Title Class: In case you want the Title to be styled differently, you can add required CSS classes for the field. You may need to define the styles for this class in your stylesheet. Separate classes with a comma.
- Subtitle: Subtitle will be shown on the product page below to the title. This will also be displayed on the Email, and on the Thank You Page, Order Details Page etc. once you tick the checkboxes.
- Subtitle Type: It defines the type of HTML tag for this field.
- Subtitle Color: Use the color picker to give color to the Subtitle.
- Subtitle Class: In case you want the Subtitle to be styled differently, you can add required CSS classes for the field. You may need to define the styles for this class in your stylesheet. Separate classes with a comma.
- Options: This property is applicable only for Select, MultiSelect, Radio and Checkbox Group fields. Following are the fields in Options property:
- Option Value: This is a unique value used for backend calculations of the option provided. For example, if we are providing a country select option, we will give the option value for the United States as ‘US’.
- Option Text: This is the display name in the checkout form for the given option.
- Price: This is the extra price added for the given option.
- Price Type: Price type is the type of price added to the given option. You can choose between Normal and Percentage.
- Max. Selections: This property is applicable only for the Multi-select field. Here, you can specify the number of maximum selections the shopper can make.
- The following properties are applicable for Checkbox Field
- Checkbox Value: The specific value required for the checkbox field can be entered here. If no value is provided, ‘1’ will be taken as a default value.
- Checked by Default: By enabling this option, the checkbox field in the checkout form will be checked by default.
- The following properties are applicable for Date Picker fields only
- Date Format: Define the date format accepted for this field. The default format is dd/mm/yy which is already provided. You can edit this format and rewrite according to your requirements. These are the other general time formats you can use:
- International- mm/dd/yy
- Medium - d MM, y
- ISO 8601 - yy-mm-dd
- Short - d M, y
- Full - DD, d MM, yy
- With Text - 'Day' d 'of' MM 'in the year' yy
- Default Date: Set default date to be displayed. Specify the date in the format specified in Date Format property. You may also specify the number of days to be offset from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or leave empty if you don’t want to set a minimum limit.
- Min. Date: The date picker calendar will only show dates starting from the date set in this field. Specify the date in the format specified in Date Format property. You may also specify the number of days to be offset from today (e.g. -7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1m -7d'), or leave empty for today.
- Max. Date: The calendar will only show dates up to the date set in this field. Specify the date in the format specified in Date Format property. You may also specify the number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or leave empty if you don’t want to set a maximum limit.
- Year Range: Year Range defines the range of years displayed in the year drop-down of the date picker calendar. The format is “from year: to year”. You can set the range in different ways as explained below:
- Relative to current year('-nn:+nn'): e.g. -5:+3 . If the current year is 2016, the dropdown will show years from 2011 till 2019.
- Relative to the currently selected year('c-nn:c+nn'): e.g. c-5:c+3. If the year of the selected date is 2017, the dropdown will show years from 2012 till 2020.
- Absolute values('nnnn:nnnn'): e.g. 1900:2018. The dropdown will show years from 1900 till 2018.
- Combinations of above formats('nnnn:+nn','-nn:c+nn',etc.. ): e.g. 2012:+3. The dropdown will show years from 2012 till 2019 if the current year is 2016. eg -5:c+3. The dropdown will show years from 2011 till 2020 if the current year is 2016 and selected date is in the year 2017.
Note that this option only affects what appears in the year drop-down on the calendar popup. To restrict which dates may be selected from the calendar, use Min. Date and/or Max. Date properties.
- Number Of Months: Set the number of months to show at once on the date picker calendar.
- Disabled Days: From the list, select the days of the week that need to be disabled on the calendar. For example, if you want to disable Saturdays and Sundays on the calendar, choose Saturday and Sunday from the dropdown.
- Disabled Dates: Enter dates that need to be disabled on the calendar in yyyy-mm-dd format (separated by commas for multiple dates). This is useful if you want to disable specific days such as holidays. Ensure the dates are provided in the correct format. Example: If you want to disable 17th January 2017 and 23rd March 2017 in the datepicker you can fill this field with the value “2017-01-17, 2017-03-23”.
- The following properties are applicable for Time Picker fields only
Time picker is a dropdown list with time listed at a defined interval. This input field helps users to choose time for delivery, appointment etc.
- Min. Time: Provide the starting time in the list. ex: 9:00 AM.
- Max. Time: Provide the end time available in the list. ex: 7:00pm.
- Time Step: The interval which splits the time between the starting and ending time. In minutes, ex: 30.
- Time Format: Choose between 12 hour or 24 hours format.
- The following properties are applicable for File upload only
- Maxsize (in MB): In this field, you can specify the maximum size of the file that can be uploaded.
- Accepted File Types: Here, you can specify the accepted file types separated by commas.
- Conditional Fields
To add display conditions, click on the 'Display Rules' tab from Add/Edit popup. It will open a form where you can add multiple conditions based on cart items and other field(s) values.
How to Edit Existing Fields
To edit any field properties, click on 'Edit' (pencil icon) at the right end of each field. It will open a popup form with the current values, there you can modify any values and Update Field.
Finally, click on the 'Save Changes' button to take effect of the new changes.
How to Remove Fields
To delete/remove field(s) → select field(s) using the check-boxes at the left side of each field, then click on 'Remove' button.
The selected fields will be marked as deleted and shows in a red background colour. Finally, click on the 'Save Changes' button to actually remove selected fields.
How to Enable/Disable Fields
To Enable or Disable field(s) → select field(s) using the check-boxes at the left side of each fields → then click on 'Enable' or 'Disable' button.
The selected fields will be marked as disabled and shown in a grey background colour. Finally, click on the 'Save Changes' button to actually enable/disable selected fields.
How to Change Display Order
To change the field(s) Display Order → Move field up or down using the move handle at the leftmost side of each field.
Click on the 'Save Changes' button to save your new display order.
A duplicate of an existing field can be created by clicking on the ‘Copy’ button next to the pencil icon for editing. Then, a popup to a new field will appear with all the fields except the field name, filled same as that of the duplicated field. All you have to do is to assign a new field name and click on Add New Field.
Reset to Default Settings
To revert all changes, click on 'Reset to default fields' button.
All your changes will be removed and reset to the WooCommerce default fields set.