Color swatches for WooCommerce products with a free plugin

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.

Your customers will see the WooCommerce product with 3 options.

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.

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.

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

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

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.

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

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

Product fields customization

✅ Now let's see the additional plugin options:

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

      

   2. Fill in the fields with the information you want to display on your WooCommerce product page.

      

   3. Go to the Advanced tab. Here you can change the Single item width in px:

      

   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.

      

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

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

Change the border color (when selected) to #d3d3d3

Change the shape of the image to a circle

WooCommerce swatches on the product page

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

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:

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