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!
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
- Color Picker for a WooCommerce product page
- WooCommerce advanced custom fields: a FREE product & checkout customizer
- Add a checkbox and multiple options to a WooCommerce product page
- Add a gift wrap option for a WooCommerce product
- WooCommerce custom fields for variations for better variable products
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.orgGiving 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!
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.
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👀 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:
- Also, read our Documentation if you need more information on each of the fields you will see at this point:
Color Swatches: different field types - Fill in the fields with the information you want to display on your WooCommerce product page.
Color Swatches configuration - Go to the Advanced tab. Here you can change the Single item width in px:
Radio with colors field type WooCommerce product page - 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.
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
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
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
div.fpf-radio-images p.custom-color-swatches input:checked+label img {
border-color: #d3d3d3;
}
Change the shape of the image to a circle
div.fpf-radio-images p.custom-color-swatches input+label img {
border-radius: 50%;
}
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.
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.orgAdditionally, 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
Leave a Reply