Product Page

WooCommerce Product Colour Picker

A colour picker on the WooCommerce product page


There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About This Solution

Yes you read that correctly, colour with a U. Here in the UK, we spell things a little differently. Anyway, to the guide. Adding a colour picker to the single product template is really easy. When a user picks a colour, the hex value is stored as product meta and once added to the cart, shown under the product name in the mini-cart, cart, checkout, and order editor in the dashboard. If the user has the ability to customise a product with colours, it’s probably best you use a Variable Product type where the user can simply select their colour, then the variation image will reflect this. This solution does not interfere with the product images, it simply allows the user to pick a colour and ties it to the product in the order. This could be useful if specific hex codes are needed instead of thousands of hex codes in a variable drop down list.

 * Snippet Name:     WooCommerce product custom colour picker field
 * Snippet Author:

// Add the new field
add_action( 'woocommerce_before_add_to_cart_button', 'ecommercehints_custom_product_colour_field' );

function ecommercehints_custom_product_colour_field() {
   global $product;

   echo '<div class="ecommercehints_custom_product_colour_field">
      <label for="stitching-colour">Stitching Colour: </label>
      <input type="color" id="stitching-colour" name="stitching-colour">


// Save the field to the cart data
add_filter( 'woocommerce_add_cart_item_data', 'ecommercehints_save_custom_colour_to_cart_data', 10, 3 );

function ecommercehints_save_custom_colour_to_cart_data( $cart_item_data, $product_id, $variation_id ) {

   if ( !empty( $_POST['stitching-colour'] ) ) {
      $cart_item_data['stitching-colour'] = sanitize_hex_color( $_POST['stitching-colour']);

   return $cart_item_data;


// Show custom field data on cart, checkout, and thank you page.
add_filter( 'woocommerce_get_item_data', 'ecommercehints_show_custom_field_data_under_product_name', 10, 2 );

function ecommercehints_show_custom_field_data_under_product_name( $item_data, $cart_item ) {

   if ( !empty( $cart_item['stitching-colour'] ) ) {
      $item_data[] = array(
         'key'     => 'Stitching Colour',
         'value'   => $cart_item['stitching-colour'],

   return $item_data;


// Save the custom field data as order meta
add_action( 'woocommerce_checkout_create_order_line_item', 'ecommercehints_add_custom_field_data_as_order_meta', 10, 4 );

function ecommercehints_add_custom_field_data_as_order_meta( $item, $cart_item_key, $values, $order ) {

   if ( !empty( $values['stitching-colour'] ) ) {
      $item->add_meta_data( 'Stitching Colour', $values['stitching-colour'] );


Product Custom Colour Hex Value Showing In The Mini-Cart

WooCommerce Mini Cart showing colour picker hex code under product title

Product Custom Colour Hex Value Showing In The Cart

WooCommerce Cart showing custom colour picker field data under product name

Product Custom Colour Hex Value Showing On The Checkout

WooCommerce Checkout showing cusotm colour picker meta under product title

Product Custom Colour Hex Value Showing On The Thank You Page

WooCommerce Checkout Page showing product custom colour picker field data under product name

Product Custom Colour Hex Value Showing On The Order As Meta

WooCommerce Order Editor Admin Dashboard showing product custom colour field hex meta under the product name as an attribute

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.