Color Picker – Wc Fields Factory

November 15, 2017 Saravana Kumar K 2 Comment(s)

Product Field

Insert a color picker field on the product page. Wc Fields Factory uses the Spectrum Js plugin to render Color Picker Widget.

Option	Description
Color Format	User selected color value’s format, there are five types of format supported, 1. Hex (default), Hex3, HSL, RGB and Name (Works only for w3c standard color names).
Default Color	Default color value for this colour picker – (This value will be used incase If user hadn’t chosen any).
Show Palette Only	Show the preset color palettes, instead of actual color picker (where user can chose any color).
Palettes	Color preset configurations, so that user can choose a color from palette. as palette is grid view where each grid cell represent a color, you will have to provide color values in HEX format, each column delimited by the comma and each row delimited by the new line. #fff, #ccc, #555 #f00, #0f0, #00f
Show Hex Value as	Use this option to define how the user chosen color value should be displayed in Cart & Checkout pages, by default the chosen color values would be displayed as a raw value (Based on Color Format option), otherwise it will be rendered as an actual color in a box.
Required	Make this color picker field mandatory – user cannot perform Add To Cart operation without choosing any color.
Message	Message that has to be displayed when validation failed for this color picker field (When the Required Option is Set).
Visibility	Whether this color picker field’s 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 gave a 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	Field level cloning option – Whether this field is cloneable or not (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 (not much use since the input field itself in hidden state).

Product Field Raw Output

As you might aware that the below input field will be in hidden state and an actual Color Picker widget will be injected in that place.

<table class="wccpf_fields_table ">
	<tbody>
		<tr>
			<!-- Label section starts here -->
			<td class="wccpf_label">
				<label for="test_color_picker_field">Test Color picker Field</label>
			</td>
			<!-- Label section ends here -->
			
			<td class="wccpf_value">
				<!-- Actual field starts here -->
				<input type="text" name="test_color_picker_field" class="wccpf-field wccpf-color" value="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" data-cloneable="yes">
				<!-- Actual field ends here -->
				
				<!-- Validation message section -->
				<span class="wccpf-validation-message"></span>
			</td>
		</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.
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 test_admin_select_field">
	<!-- Label for the Select field -->
	<label for="test_admin_color_picker">Test Admin Color picker</label>
	
	<!-- Actual field starts here -->
	<input type="text" name="test_admin_color_picker" class="wccaf-field wccaf-color" value="" wccaf-type="text" wccaf-pattern="mandatory" wccaf-mandatory="no">
	<!-- Actual field ends here -->
	
	<!-- Validation message section -->
	<span class="wccaf-validation-message">This field can't be left un chosen</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_color_picker">Test Admin Color picker</label>
      
    <!-- Actual field starts here -->
    <input type="text" name="test_admin_color_picker" class="wccaf-field wccaf-color" value="" wccaf-type="text" wccaf-pattern="mandatory" wccaf-mandatory="no">
    <!-- Actual field 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 )

Test Admin Color picker

This field can’t be Empty

Author

Saravana Kumar K

Saravana Kumar K ( sark ) manages sarkware.com, also a freelancer who have solid background in developing Themes and Plugins for Wordpress and Shopify Platforms. You can find more about him at IamSark.com