Color Picker for a WooCommerce product page

The Flexible Product Fields plugin extends WooCommerce product options with additional fields. It helps you to personalize your product page as you see fit. There are 20 different field types available, and the color picker is one of them. In this article, I will tell you how to add the color picker to change colors directly on the WooCommerce product page using Flexible Product Fields (a free WordPress plugin). Would you like to show color variations on the WooCommerce shop page? Read to learn more!

Are the WooCommerce attributes for variable products not enough for you?

Let me show you the way to let customers change colors with the color picker field for a WooCommerce product with a free plugin.

Table of contents

• WooCommerce color picker with a free WordPress plugin
• Add a color picker field - a quick guide
• 18 custom fields available with a free plugin!

WooCommerce color picker with a free WordPress plugin

There are plenty of color picker WooCommerce plugins out there in the WordPress repository. What makes the Flexible Product Fields so special then, you might ask?

Well, let’s have a look:

1. As many as 💪🏽 18 different field types are available in the free version (among them the color picker field). And the amount of varied field types is still growing!
2. Both the free and PRO versions are constantly updated ♻️
3. User-friendly design 😀
4. Simple installation and implementation ✅
5. Impeccable, professional 🆘 technical support (1-on-1 if you decide on the PRO version)
6. Conditional logic  🪄  and custom price fields available in PRO
7. 🤝 Competitive pricing 

Color Picker for WooCommerce products - what's that for?

A color picker is a tool for choosing and customizing color properties. Users typically select colors using an engineered interface with a visible depiction of color. A color picker normally consists of two main parts: a color slider and a canvas.

What is the use of a WooCommerce color picker?

Let’s focus on the benefit this field might have on your WooCommerce product page.

• Firstly, it provides a quicker way to choose any existing color. Implementing a color picker input to your WooCommerce product page, you contribute to an improved user experience on your website.
• Secondly, it enriches it. Adding as much information as possible to your product page about your item, makes the user make up his mind more easily. You know what it means  for you, right? You sell more --> you earn more.
• Thirdly, you give the user the possibility to customize the product as per his preferences. This means the user has the opportunity to choose from any of the existing colors. By adding this feature to your product page, you can gain an advantage over the competition.

Add a color picker field - a quick guide

Let’s learn now how to add this picker field to your page in a few steps.

1. Get the free plugin

   ✅ First of all, you’ll need to download the Flexible Product Fields plugin →
    

2. Plugin settings

   Once you have it installed, a new tab will appear in the Products submenu. This is where you can add the color field for your WooCommerce products.

   

3. Add a new field group

   ✅ Now, in the plugin settings, you may add a new Field Group and then a New field. Select the Color field type, which is placed in the Picker Fields section:

   

4. Customize the color picker field

   ✅ Now let’s start the customization process as we see fit. Have a look at this example:

   

   💡 We encourage you to familiarize yourself with our documentation, where all field types and labels are explained in detail.

5. PRO settings for the field

   These were the General settings. Additionally, you can also add a fixed or percent price or conditional logic.

   However, these two features are available only if you use the PRO version of the plugin. After you finish your color picker customization, don’t forget to save and publish your changes.
    

6. Show and change colors variations for a WooCommerce product on the shop page

   Eventually, this is how the WooCommerce color picker will look on your product page:

   

   

18 custom fields available with a free plugin!

The Flexible Product Fields plugin has been recently updated! So, now you can use 18 fields to customize your WooCommerce products!

Text fields

• Text
• Textarea
• Number
• E-mail
• URL

Option fields

• Checkbox
• Radio with colors
• Multi-checkbox
• Select
• Radio
• Multi-select
• Radio with images

Picker fields

• Time
• Color

Other fields

• Heading
• Paragraph
• Image
• HTML

Summary & more about product customization

Today, you've learned how to add a new field - the color picker for your WooCommerce products. You may use the Flexible Product Fields free plugin to show color variations on the WooCommerce product page.

Let customers choose the colors of WooCommerce products attractively!