WooCommerce Product Colour Picker

Pre-Requisites

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.

Need support with the snippet? We’re Here to Help You, Contact Us!

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:   ecommercehints.com
 */

// 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">
   </div><br>';

}

// 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'] );
   }

}