14 Nov
2017

Radio Buttons – WC Fields Factory

1 Comment(s)

Product Field

Insert a radio button fields on the product page.

Option Description
Options Use the Option Factory (Located at the Right Side) to create Radio Buttons. for manual creation see the below explanation.
This option is used to generate the radio button, each radio button will contains Value attribute (which is not visible to User) with that you will have to provide a caption which convey the purpose of that Radio button.
So basically we need two things to create a single Radio Button, Value and Label, Value represent the Value attribute of the radio and Label represent the Caption.
Here we represent a single option with “|” delimiter, if more than one option then delimite with new line.

        red|Red     <!-- Radio Button 1 -->
        green|Green     <!-- Radio Button 2 -->
        blue|Blue     <!-- Radio Button 3 -->
Default Options Default Options for this radio group, All the radio buttons created will be displayed here on real time – (These options will be used incase If user hadn’t chosen any).
Layout How the Radio Buttons should be stocked on the screen Vertically or Horizontally.
Required Make this Radio Buttons mandatory – user cannot perform Add To Cart operation without choosing any option.
Message Message that has to be displayed when validation failed for this radio group (When the Required Option is Set).
Visibility Whether this radio buttons value (Chosen by the user) has to be displayed on the Cart & Check 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.
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).
Product Field Raw Output
<table class="wccpf_fields_table ">
	<tbody>
		<tr>
			<!-- Label section starts here -->	
			<td class="wccpf_label">
				<label for="test_radio_field">Test Radio Field</label>
			</td>
			<!-- Label section ends here -->
			
			<!-- Field section starts here -->
			<td class="wccpf_value">
				<!-- Actual field -->
				<ul class="wccpf-field-layout-horizontal" data-cloneable="yes">
					<li>
						<label class="wcff-option-wrapper-label"><input type="radio" class="wccpf-field " name="test_radio_field" value="red" wccpf-type="radio" wccpf-pattern="mandatory" wccpf-mandatory="no"> Red</label>
					</li>
					<li>
						<label class="wcff-option-wrapper-label"><input type="radio" class="wccpf-field " name="test_radio_field" value="blue" checked="" wccpf-type="radio" wccpf-pattern="mandatory" wccpf-mandatory="no"> Blue</label>
					</li>
				</ul>
				<!-- Validation message -->
				<span class="wccpf-validation-message">Test product radio validation message</span>
			</td>
			<!-- Field section ends here -->
		</tr>
	</tbody>
</table>

Admin Field

All the above options available for the Admin Field as well, along with those there are some specific options related to only Admin Fields.

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 Raw Output (on Product Page)
<p class="form-field">
	<!-- Label for the Radio Button Group -->
	<label for="test_admin_radio">Test Admin Radio</label>
	
	<!-- Individual options starts here -->
	<label class="wcff-option-wrapper-label"><input type="radio" class="wccaf-field " name="test_admin_radio" value="red" wccaf-type="radio" wccaf-pattern="mandatory" wccaf-mandatory="no"> Red</label>
	<label class="wcff-option-wrapper-label"><input type="radio" class="wccaf-field " name="test_admin_radio" value="blue" wccaf-type="radio" wccaf-pattern="mandatory" wccaf-mandatory="no"> Blue</label>
	<!-- Individual options ends here -->
	
	<!-- Validation message -->
	<span class="wccaf-validation-message">This field can't be Empty</span>
</p>
Admin Field Raw Output (on Product Category Create Page)
<div class="form-field">
	<!-- Label for the Radio Button Group -->
	<label for="test_admin_radio">Test Admin Radio</label>
	
	<!-- Individual options starts here -->
	<label class="wcff-option-wrapper-label"><input type="radio" class="wccaf-field " name="test_admin_radio" value="red" wccaf-type="radio" wccaf-pattern="mandatory" wccaf-mandatory="no"> Red</label>
	<label class="wcff-option-wrapper-label"><input type="radio" class="wccaf-field " name="test_admin_radio" value="blue" wccaf-type="radio" wccaf-pattern="mandatory" wccaf-mandatory="no"> Blue</label>
	<!-- Individual options ends here -->
	
	<!-- Validation message -->
	<span class="wccaf-validation-message">This field can't be Empty</span>
</div>
Admin Field 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_radio">Test Admin Radio</label>
	</th>
	<!-- Admin Edit Category field's label ends here -->
		
	<td>
		<!-- Individual options starts here -->
		<label class="wcff-option-wrapper-label"><input type="radio" class="wccaf-field " name="test_admin_radio" value="red" wccaf-type="radio" wccaf-pattern="mandatory" wccaf-mandatory="no"> Red</label>
		<label class="wcff-option-wrapper-label"><input type="radio" class="wccaf-field " name="test_admin_radio" value="blue" wccaf-type="radio" wccaf-pattern="mandatory" wccaf-mandatory="no"> Blue</label>
		<!-- Individual options ends here -->
		
		<!-- Validation message -->
		<span class="wccaf-validation-message">This field can't be Empty</span>
	</td>	
</tr>

Leave a Reply

Your email address will not be published.

 

1 Comment(s)

  1. Raj June 28, 2021

    I have a radio button with three options (Exam Type). Also, I have three other radio button fields (name of type).
    I want to display the name type field if the user selects that particular Exam Type.
    I set three conditions but it’s not working. Only the third condition is implemented

    Reply