• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Dorota Ingielewicz

Color Picker for a WooCommerce product page

Updated: February 16, 2023 / Plugin Tutorials, Plugin Updates

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 
I encourage you to download it and try it out. Install the free version of this color picker plugin and see for yourself if it convinces you.

Flexible Product Fields for WooCommerce Product Page

Change WooCommerce colors easily. Install the free version of Flexible Product Fields and add a color picker field to your product page.

Download or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

 

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.

color field for WooCommerce products
An example of a color picker field

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.
Gain the advantage over your competitors

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.

    Flexible Product Fields in WordPress dashboard
    Here is where you will find Flexible Product Fields
  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:

    Change WooCommerce colors with a color picker field
    Color field among Picker Fields
  4. Customize the color picker field

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

    WooCommerce show color variations on shop page
    Adapt your color picker according to your needs & show color variations on the WooCommerce shop page

    💡 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:

    Color picker WooCommerce added with Flexible Product Fields
    The final result in detail

    WooCommerce show color variations on shop page
    WooCommerce Color Picker: Final result

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!

Related to the WooCommerce color picker

  • WooCommerce color swatches

    WooCommerce color swatches
    WooCommerce color swatches. Find out how to add WooCommerce color swatches with Flexible Product Fields.

  • Add product wrapping with FPF

    WooCommerce gift wrapping option
    Add a gift-wrapping checkbox. Find out how to add a gift-wrapping option to your product page.

Tweet

3 minutes read3110 views

Dorota Ingielewicz

Marketing Ranger at WP Desk. Interested in content writing, online marketing and advertisments of all kinds.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Plugin Updates › Color Picker for a WooCommerce product page

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk