Custom Color Picker for WooCommerce

THIS IS NOT A SUPPORT REQUEST, IT’S JUST THE TIP BRO

If you’re using the Advanced Layout option to build your WooCommerce product pages, here is a simple way to include a custom color picker that will output the hex code. This is great for products where you offer a custom color option. Note, this won’t automatically put the hex code into any input boxes, but it will allow your customers to find the right color so they can copy/paste the code into the appropriate field. Once you add the code below to your child theme’s functions.php file and have edited it to reflect the script file locations, you can place the shortcode into a code snippet widget and place wherever you want. I used the shortcode in conjunction with an iconbox field so I could give directions.

You will need to download, then upload a few simple javascript files….then adjust the code below to reflect the location. Feel free to scan the files for errors prior to uploading to your server…always a smart thing to do.
DOWNLOAD

Here is an example…

// Add color picker script to header
add_action('wp_head','get_custom_color');
function get_custom_color( ){
	echo '<script src="[replace with direct location to file - custom-color.js]"></script>';
	echo '<script src="[replace with direct location to file - jscolor.js]"></script>';
}
// Create color picker shortcode
function get_colorpicker() {
	$misccode = "{onFineChange:'update(this)',valueElement:null,value:'66ccff'}";
    return '<div style="padding-top:8px!important;"><button class="jscolor '. $misccode .'" style="width:40px; height:40px; border: 1px solid #e1e1e1; float: left; margin: 0px 10px 15px 5px; border-radius:3px;"></button><div style="font-size:20px!important; margin-top:8px;"><span id="hex-str" style="color:#959595!important;"><span style="font-size:50px!important; vertical-align:text-top!important; color:#959595!important;">☚</span> Choose a color...</span></div></div>';
}
add_shortcode( 'color_picker', 'get_colorpicker' );

• This topic was modified 7 years, 1 month ago by Kahil.