Variation swatches help you display your products more conveniently. It allows you to provide more detail about the product's options.
You have probably seen variation swatches on popular e-commerce sites like Amazon and eBay. They help customers to choose product options more conveniently and easily. If you own a WooCommerce store, you just need a good variation swatches plugin because woocommerce does not provide any features for products with attributes.
There are 3 options available for you if want to add variation swatches to your woo-commerce store,
- Add variation swatches plugin
- Choose a theme that has prebuilt variation swatches to support
- Write custom code for your site
In this article, you’ll learn step-by-step how to set up variation swatches for WooCommerce using a code-free plugin.
What Are Variation Swatches?
WooCommerce Variable products allow you to sell different variations of your products. These variables are known as attributes. Attributes are showcased in the form of swatches on product pages.
For example, if you sell clothes then you might have four attributes for it including color, size, style, and material. Variation swatches help you control the prices, stock, image, and more for each product variation.
Customers can select the clothes they’d like to purchase by selecting their preferred color, size, and material directly from the product page.
In this way, WooCommerce variation swatches help you display variable products in a more intuitive and user-friendly way. Depending on the plugin you’re using, it might use color swatches, image swatches, text swatches, or radio buttons to display the different product attributes on single product pages.
Why variation swatches?
Default WooCommerce does not allow you to customize variable products. You can provide many intuitive features to your customers to enhance your store’s credibility and design. Variation swatches do all of that within a few clicks.
You can let your customers have more defined options about your product with variation swatches.
Checkout this article to understand why you need variation swatches plugin.
Types of Variation Swatches
Now that we know about variation swatches. let’s look at the different types you can add to your WooCommerce store.
- Color Swatches
- Dual Color Swatches
- Text Swatches
- Image Swatches
- Radio Button Swatches
- Drop-Down Swatches
6 Key Benefits of Adding Variation Swatches to Your Store
No matter what you are selling, a good product page presentation will lead to better sales and conversions. If your customer cannot choose what options they want with your product then it can affect sales.
With variation swatches, you will be improving the product page and product sales as well. Check out all the benefits of variation swatches,
- Showcase product options more clearly
- Enhance user experience and sales
- Give clear ideas to customers about the product
- Improve customer engagement
- Enhanced shopping experience
- Lower disputes on wrong variable orders
Which Variation Swatches Plugin is best for WooCommerce?
Before deciding what variation plugin is the best, we recommend you check out this comparison between top variation swatch plugins.
IWP Swatches is one of the most advanced and featured variation swatches plugins for WooCommerce.
Without requiring any technical knowledge, it lets you add variation swatches to any WooCommerce theme, and it supports swatches using labels, images, or colors.
Not only variation swatches, It is a complete product page builder with more than 26+ advanced features and 56+ customization options.
How to use IWP Swatches For WooCommerce
To follow this tutorial, we’re assuming you already have WooCommerce installed with products added to your store. From there, we’ll cover how to add variation swatches to your store.
- Get the IWP Swatches plugin
- Create variable product
- Add and configure product attributes
- Add Variation, Swatches Data
- Save all settings and view the product page
1.
Get IWP Swatches plugin
Get IWP Swatches and activate them by following plugin documentation to access plugin updates and features.
2.
Create variable product
For IWPS to place variation swatches on product pages, you must create attributes and product variants for WooCommerce products.
- Product attributes are product data like colors, sizes, etc.
- IWPS is compatible with both Global and custom attributes.
If you are using a custom attribute format, then you’ll need to create variations manually. IWP supports both formats.
It is recommended to use global attributes to enhance filter features on shop pages.
After creating a variable product and adding all the mandatory product data, you can start adding attributes to products.
3.
Add and configure product attributes
IWP Swatches works with both global and custom variation attributes.
To create global product attributes,
Go to Edit Product > Attributes > Click on Add New > Give a name to the attribute group as we have given Colors and Sizes in the above image.
After creating the attribute group, add the values.
You can create new or use premade values. To create values before customizing a product, Go to Product > Attributes > Click on configure terms and create values.
You will be able to select the values that you made in attributes tab into product via searching in attribute groups.
Simply click on the values field and choose the values that you made.
But. if you want to use custom variable format then you will need to add the terms manually with a piping character gap to the values tab as shown in the below image.
You can add the custom attribute values as shown in the above image.
After creating your required variation groups and adding your required fields to them, Simply click on save and move to customizing variation swatches and product gallery.
4.
Add Variation Swatches Data
After you have successfully created your product attributes, you can set variation swatch data in IWPS.
To customize swatches data, Go to Edit Product > Swatches Settings
Then, Choose the variation you want to customize. With IWPS, you can create an image, color, dual color, text, radio button, and drop-down-based variation swatches.
After setting up variation swatches, you will need to set up additional gallery images.
Go to Edit Product > Variations
Choose the variant of the product in which you want to add images.
Click on Add Variation Gallery Images or Videos and select the product gallery images and then click on save product.
Note – You can add product videos from different sources besides self hosted like youtube and vimeo.
5.
Save all settings and view product page
After customizing all options and settings, your product page will look like above image.
Note – It may not look same if you are using any other plugin. Also, some functions may vary that are based on theme.
Advanced Settings
Till this point in the article, you should have created a product with working variation swatches and an additional gallery. But IWP Swatches lets you customize your product page even further. Let’s check out some of the advanced settings.
Note – There are more than 26+ advanced features and 56+ customizing options in the plugin, Only some of the popular features are showcased in the advanced section only.
The Advanced setting options we are going to check are,
- Sharable Links
- Product Limiter
- Vertical Gallery
- Price Range Selectors
- Archives Stock Info
- Product Video
- Product Page Element Dimensions
1.
Sharable Links
IWP Swatches allows you to add sharable links for every variation. You can share different URLs for product attributes to create ads and promotion campaigns.
2.
Product Limiter
If your store has a high number of variation swatches then you can apply a variation limiter to your shop page. It will only show a limited number of variations on the page.
3.
Vertical Gallery
IWP Swatches allows you to create a vertical gallery with both alignment options.
4.
Price Range Selectors
With IWP Swatches, you can update the default WooCommerce pricing layout of a price range into a specific price.
Default WooCommerce shows a price range of all the attribute prices, But with IWP Swatches you can update it with a more accurate price format. IWP Swatches will show the exact price of the variation that the buyer has chosen.
5.
Archives Stock Info
IWP Swatches allows you to showcase product stock info on the WooCommerce shop pages.
6.
Product Video
IWP Swatches allows you to add product videos in product gallery.
7.
Product Page Element Dimensions
IWP Swatches gives a platform-compatible experience to your customers with our all-device-compatible product page layouts.
Our IWP Swatches Product Page Demo
We have made various product page designs using IWP Swatches for different styles of WooCommerce stores. Checkout our designs to get inspired for your store.
