Select Box

Select Field for Product & Variation

This field type is used to create a dropdown list. It used to collect single choice option from the user. Select field for Products and Select field for Variations has same properties.

Select Field Configurations for Product & Variation

Option	Description
Options	Use the Option Factory (Located at the Right Side) to create options for select. for manual creation see the below explanation. This option is used to generate the select option, each select option will contains Value attribute (which is not visible to User) and Label attribute which is visible to the users. So basically we need two things to create a single select option, Value and Label, Value represent the Value attribute of the select option and Label represent the visual caption of the select option. Here we represent a single option with “|” delimiter, for more than one option, delimite with new line. red|Red green|Green blue|Blue
Default Options	Default Options for this select, All the options created for this select will be displayed here on real time – (These options will be used incase If user hadn’t chosen any).
Required	Make this Select field mandatory – user cannot perform Add To Cart operation without choosing any option.
Message	Message that has to be displayed when validation failed for this select field (When the Required Option is Set).
Visibility	Whether this select option value (Chosen by the user) has to be displayed on the Cart & Checkout Page. Note: Regardless of this option this fields value will be added as Order Meta (Unless you configured not so).
Order Item Meta	Whether to add this field’s value (Chosen by the user) as Order Item Meta.
Send to Customer	Whether to show this field to customer’s order email and customer’s order view (in the My Account page). Even though it is added as Order Item Meta, but visible only to store admin only.
Logged in Users Only	Make this field available only for the Registered Users only (They must have to be logged in).
Target Roles	Make this field available only for the users that have the selected roles. Available to all, if you haven’t selected any
Editable	Make this field’s value editable on Cart Page – (incase If user has chosen the wrong value, he can correct it on the cart page itself, no need to go back to product page). Note: this is only for the Cart page not for the Checkout Page.
Cloneable	Exclude this field from cloning (Works only if Cloning option is enabled from the Settings Page).
Field Class	Use this option to add a custom css class to this field for your own styling purpose (added to each radio buttons).
Onload	This option controls the fields visibility when the product is loaded. By default Yes

Product Field’s Raw Output

<table class="wccpf_fields_table ">
	<tbody>
		<tr>
			<!-- Label section starts here -->
			<td class="wccpf_label">
				<label for="test_select_field">Test Select Field</label>
			</td>
			<!-- Label section ends here -->
						
			<td class="wccpf_value">
				<!-- Actual field starts here -->
				<select class="wccpf-field " name="test_select_field" wccpf-type="select" wccpf-pattern="mandatory" wccpf-mandatory="no" data-cloneable="yes">
					<option value="red">Red</option>
					<option value="blue">Blue</option>
				</select>
				<!-- Actual field ends here -->
				
				<!-- Validation message section -->
				<span class="wccpf-validation-message">This field can't be left un chosen</span>
			</td>			
		</tr>
	</tbody>
</table>

Select Field for Admin

Select field can be added for woocommerce admin products, variations & product categories. To give store admin, the ability to add more configurations for the product. This fields can also be enabled to show on front end product page as well. The value can be retrieved like any other post meta, using get_post_meta() function.

Select Field Configurations for Admin

Select Field for Admin has all the properties as Product & Variation except Onload property which is specifically for Field Rules functionality. besides that Select Field for Admin has some additional properties.

Option	Description
Show on Product Page	Show this field on Front end Product page as well.
Read Only	Whether to show this field as Read Only Field (applicable only on Front End Product Page).
Value or Field	Show the value that is chosen on this Admin Field instead as the Field itself. Whatever the option, Store Admin chosen for this field on the back end will be displayed on the Front end Product Page.
Tips	Whether to show the tip icon in the back end.
Description	Tool-tip message, when admin user click on the Tips Icon.

Admin Field’s Raw Output (on Product Page)

<p class="form-field test_admin_select_field">
	<!-- Label for the Select field -->
	<label for="test_admin_select">Test Admin Select</label>
	
	<!-- Actual field starts here -->
	<select class="wccaf-field " name="test_admin_select" wccaf-type="select" wccaf-pattern="mandatory" wccaf-mandatory="no">
		<option value="red">Red</option>
		<option value="blue">Blue</option>
	</select>
	<!-- Actual field ends here -->
	
	<!-- Validation message section -->
	<span class="wccaf-validation-message">This field can't be left un chosen</span>
</p>

Admin Field’s Raw Output (on Product Category Create Page)

<div class="form-field">
    <!-- Label for the Radio Button Group -->
    <label for="test_admin_select">Test Admin Radio</label>
     
    <!-- Actual field starts here -->
	<select class="wccaf-field " name="test_admin_select" wccaf-type="select" wccaf-pattern="mandatory" wccaf-mandatory="no">
		<option value="red">Red</option>
		<option value="blue">Blue</option>
	</select>
	<!-- Actual field ends here -->
     
    <!-- Validation message -->
    <span class="wccaf-validation-message">This field can't be Empty</span>
</div>

Admin Field’s Raw Output (on Product Category Edit Page)

<tr class="form-field">
    <!-- Admin Edit Category field's label starts here -->
    <th scope="row" valign="top">
        <label for="test_admin_select">Test Admin Radio</label>
    </th>
    <!-- Admin Edit Category field's label ends here -->
         
    <td>
        <!-- Actual field starts here -->
		<select class="wccaf-field " name="test_admin_select" wccaf-type="select" wccaf-pattern="mandatory" wccaf-mandatory="no">
			<option value="red">Red</option>
			<option value="blue">Blue</option>
		</select>
		<!-- Actual field ends here -->
         
        <!-- Validation message -->
        <span class="wccaf-validation-message">This field can't be Empty</span>
    </td> 
</tr>