WooCommerce Extra Product Options |Basic intructions

This document covers installation and use of this plugin, and reveals answers to common problems and issues. We encourage you to read this document if you are experiencing any difficulties.

Minimum Requirements

WooCommerce 2.2 +, WordPress 3.8 or greater, PHP version 5.2.4 or greater, MySQL version 5.0 or greater

Installation

1. Download the WooCommerce Extra Product Options plugin .zip file from your ThemeHigh account.
2. Go to WordPress Admin > Plugins > Add New to upload the plugin file you downloaded with the Choose File option.
3. Click the Install Now button and activate the plugin.

You may see more information at: Installing and Managing Plugins

Customize Product Page

Using this plugin you can add WooCommerce product fields. You can access WooCommerce Extra Product Options settings page via Products > Extra Product Option. Always click on the ‘Save Changes’ button to save your changes.

Add New Fields

To add a new field, first go to one of the section(Initially one section named ‘Default’ will be available to start working) where you want to add the field, and then click the ‘Add Field’ button. It will open 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 ‘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. Requires options set.
• Multi-select– A multiselect box. Requires options set.
• Radio– A set of radio inputs. Requires options set.
• Checkbox– A checkbox field.
• Date picker– A text field with a JavaScript date picker attached.
• Time Picker– A text field with a JavaScript time picker attached.
• Heading– A label field used as heading of a section. Heading will be useful to group fields by giving a heading to the section.
• Label– A label can be used to give additional help 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 an input field. For example, for an email field the expected format name@example.com can be displayed. The short hint is displayed in the input field before the user enters a value.
• Validations: Choose validation rules that should be applied to the input field. Email and Number are supported out-of-the-box.
• 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 eg, 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 coast for providing that extra service, you may use this property. Provide a negative value if you want to give discount.If the field type is ‘Select’, you can define price for each option available in the Select box.
• Price Type: You can set the price type as ‘Normal’ which means the set price just get added to the total or ‘Percentage’ where in the specified percentage of the product price gets added to the total.
• Required: If you select this option the field will be shown as a required field in 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 field will be enabled. If you want to disable the field you need to deselect this. A disabled field will not be displayed on the product page. It will kept in the field list on the admin side in case you need to enable it again in the future. Use 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.
• Title Position: Choose 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 color picker to give color 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 comma.
• Subtitle: Subtitle will be shown on the product page near to the title.
• 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 comma.
• Options: This property is applicable only for Select, MultiSelect, Radio and Checkbox Group fields
• Option Value
• Option Text
• Price
• Price Type

The following properties are applicable for Date Picker fields only

• Date Format: Define the date format accepted for this field. Available options are: dd/mm/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: This is 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 belowRelative 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 2020Absolute values(‘nnnn:nnnn’): e.g. 1900:2018. The dropdown will show years from 1900 till 2018Combinations 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 the Min. Date and/or Max. Date properties.
• Number Of Months: The number of months to show at once on the date picker calendar.

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: The starting time in the list. ex: 9:00 AM.
• Max. Time: 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.

Conditional Fields

To add display conditions, click on ‘Conditional 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.

Edit Existing Fields

To edit any field properties, click on ‘Edit’ button at the right end of the each field. It will open a popup form with the current values, there you can modify any values. After made the changes click on ‘Edit Field’ button. Finally click on the ‘Save Changes’ button to took effect the new changes.

Remove Fields

To delete field(s), first select field(s) using the check-boxes at the left side of each fields, then click on ‘Remove’ button. The selected fields will marked as deleted and shows in red background color. Finally click on the ‘Save Changes’ button to actually remove selected fields.

Enable/Disable Fields

To enable or disable field(s), first 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 marked as disabled and shows in gray background color. Finally click on the ‘Save Changes’ button to actually enable/disable selected fields.

Change Display Order

To change the field(s) display order, move field up or down using the move handle at the left most side of the each field. Click on the ‘Save Changes’ button to save your new display order.

Reset To Default Settings

To revert all changes, click on ‘Reset to default fields’ button. Then all your changes will be removed and reset to the WooCommerce default fields set.