• 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.

Tomasz Drzewiecki

Color swatches for WooCommerce products with a free plugin

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

Enabling color swatches and more product options for WooCommerce products can increase your sales. The most popular solution is a WooCommerce product with variations. Today, I will show you how to change the product colors with swatches for simple and variable products and add custom fields using a free WooCommerce plugin!

Giving no product options can discourage your customers from buying. On the other hand, as you know, variable products are not always the best choice.

Let me show you how to enrich WooCommerce products with color swatches, more product options, and custom fields. What's important, I will use a free product builder plugin for WooCommerce. Let's begin!

Table of contents

  • Variable Products in WooCommerce
  • WooCommerce color swatches with a free plugin!
  • WooCommerce color swatches - a step-by-step guide
  • Summary and more about custom fields

Variable Products in WooCommerce

By default, you can use a few WooCommerce product types, including simple and variable products.

The WooCommerce simple product is easy to set up, but if you want to add color options, they may not suffice. When you need to add color swatches, WooCommerce variable products may be a better choice.

Variable products: variations

Your customers will see the WooCommerce product with 3 options.

Variants on the product page

Read more on how to add a WooCommerce product with variations.

I think you may want to add color swatches more attractively!

WooCommerce color swatches with a free plugin!

You can easily add as many color swatches as you like.

Flexible Product Fields - field after CSS changes
WooCommerce product variation swatches added with Flexible Product Fields

Visualizing the selected option that the client chooses will give a better effect than the text itself. This rule is even more important when it comes to the color of the product. Inserting color swatches for WooCommerce products will minimize dissatisfaction with the wrong color selection and make the website look nicer.

💡 The Radio with colors field lets you add color swatches to your WooCommerce products.

✅ Download the FREE version of Flexible Product Fields and add a new Radio with color fields.

Flexible Product Fields for WooCommerce

Change WooCommerce colors adding Radio fields with colors. WooCommerce swatches are made simple with Flexible Product Fields.

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

👀 Also, have a look at the video, which will show you what this plugin can do in the free version:

WooCommerce color swatches - a step-by-step guide

Adding such a field is quite simple and thanks to CSS it will be possible to adjust it, e.g. to change the shape or size. Follow the steps below:

1️⃣ First, go to the WordPress dashboard → Products → Product Fields.

Add color swatches
Flexible Product Fields in the WordPress Menu

2️⃣ Then, add a new Group or select an existing Group. If the Group is a new one - give it a name (e.g. "Color options") and add it to products/categories or tags.

Radio with colors
Create a new fields group

3️⃣ Next, add a new field. Go to the Option Fields category and select Radio with colors from the options list.

Adding color swatch to WooCommerce product page
Choose the Radio with images

4️⃣Finally, enter the field label, which will also be your field name. Let’s say, "Product color".

Label for a color swatch field
Give your new field a label

Product fields customization

✅ Now let's see the additional plugin options:

    1. Also, read our Documentation if you need more information on each of the fields you will see at this point:

      WooCommerce product variation swatches
      Color Swatches: different field types
    2. Fill in the fields with the information you want to display on your WooCommerce product page.

      Change WooCommerce colors adding a Radio with color field type
      Color Swatches configuration
    3. Go to the Advanced tab. Here you can change the Single item width in px:

      WooCommerce product variation swatches - Advanced tab
      Radio with colors field type WooCommerce product page
    4. You can also set the pricing (fixed or percentage) or use another option (e.g. conditional logic) if needed. For example, let's add a CSS class e.g. "custom-color-swatches" to customize the field style.

      Pricing for color swatches
      Setting pricing for Color Swatches. You can choose from a fixed or percent price type for each option.

Customizing WooCommerce color swatches with CSS

It is not required but it is possible to paste CSS code on the page to customize the color field. But, of course, you may use the CSS class assigned in the 4th step e.g. custom-color-swatches.

Hiding the caption under the image

/* Color swatches for WooCommerce products - no caption under the image */
div.fpf-radio-images p.custom-color-swatches input+label span {
    display: none;
}

Changing the image size to 50 px and the frame size to 10 px

/* Color swatches for WooCommerce products - 50 px images and 10 px border */
div.fpf-radio-images p.custom-color-swatches input+label {
    width: calc(50px + 2*10px);
}
div.fpf-radio-images p.custom-color-swatches input+label img {
    width: calc(50px + 2*10px);
    height: calc(50px + 2*10px);
    border: 10px solid transparent;
}

Change the border color (when selected) to #d3d3d3

/* Color swatches for WooCommerce products - border color (selected) #d3d3d3 */
div.fpf-radio-images p.custom-color-swatches input:checked+label img {
    border-color: #d3d3d3;
}

Change the shape of the image to a circle

/* Color swatches for WooCommerce products - circle-shaped images */
div.fpf-radio-images p.custom-color-swatches input+label img {
    border-radius: 50%;
}
💡 Do you need some further guidance on CSS classes? You might find our article on Custom Fields Customization with CSS useful.

WooCommerce swatches on the product page

Let's see now the final effect and color swatches options on the WooCommerce product page!

Flexible Product Fields - field after CSS changes
WooCommerce product variation swatches added with Flexible Product Fields

Summary and more about custom fields

Color swatches for WooCommerce products are an important element that attracts the attention of the customer.

Of course, this solution will work for a wide range of shops as it is quite simple to adapt to a specific website. Also, it is possible to insert a pattern or an image (showing e.g. the texture of the product) instead of the color.

You can achieve the effect you are looking for thanks to the Radio with colors field type, which you will easily add and customize while using the Flexible Product Fields plugin.

Additionally, you can find more field types in the free version of the plugin, for example:

      • text fields - Email and URL
      • option fields - Multi-checkbox and Radio with colors
      • picker fields - Time and Color
      • and other fields for formatting the product page - Paragraph or HTML for inserting text and Image

Related to WooCommerce color swatches

  • WooCommerce color picker

    woocommerce color picker
    WooCommerce color picker. Find out how to add a WooCommerce color picker with Flexible Product Fields.

  • Add product wrapping

    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 read1641 views

Tomasz Drzewiecki

From 2020 in WP Desk. First as a Happiness Engineer in the Rangers team. Now as a QA Engineer in the Sailors team.

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 Tutorials › Color swatches for WooCommerce products with a free plugin

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