To improve the user experience of your WooCommerce store, you can add new features, improve the design, and much more. One of the best ways to do this is to add variation swatches to the product page.
Nowadays, most eCommerce stores sell variable products. However, WooCommerce doesn’t offer an appealing interface for displaying variable products on the front end. Instead, WooCommerce displays the product variation options in a dropdown menu, which doesn’t look appealing.
Many eCommerce store owners are curious about adding variation swatches for WooCommerce stores, but they want to know how. This guide will provide you with a step-by-step guide on how to add variation swatches for WooCommerce.
By the end of this guide, you will learn how to add color swatches, size swatches, and image swatches to your eCommerce store with ProductX, the #1 WooCommerce blocks plugin.
So, continue reading to find out how to add variation swatches for WooCommerce.
How to Add Variation Swatches for WooCommerce Store with ProductX
Let’s see how to add variation swatches to a product from scratch.
Step 1: Create Attributes
Creating attributes is like a prerequisite to creating variable products. Let’s Show you how you can create attributes.
First, go to Products > Attributes from WooCommerce. You’ll see the following fields:
- Name
- Slug
- Type
- Default sort order
You need to fill up every field according to your requirement. After filling in all the fields, click “Add Attributes” to successfully add the product attribute.
Here’s an example of the Size attribute we created:
Now, go back to the “Attribute” page, and click “Configure terms.”
Here, you can add new sizes for size-based attributes, and color for color-based attributes. Enter the details then click “Add new size” to add it to your size list.
Now, let’s move on to creating a variable product.
Step 2: Create a Variable Product
Creating variable products is easier than you think. It’ll be very easy if you follow the steps we are going to show you.
Go to Products > Add New to get the form of creating new products.
Fill up the Name, product description, and product short description per your requirement.
Then, select “Variable Product” in the “Product data-” dropdown.
Step 3: Add Product Image and Product Gallery Image
You must add a default product image. Go to the “Product Image” section and click “Set product image” to open the media manager and add your Image.
Also, if you want to show multiple images in the product gallery for a single product, go to the “Product gallery” section, and click “add product gallery image” to open the media manager and add your Image.
Don’t forget to save your settings by clicking the “Publish/Update” button.
Now we need to create variations for the product.
Step 4: Create Product Variations
To create product variation, go to the “Attributes” section in “Product data-.“
Remember we have created an attribute named size in step 1. We created a color attribute as well.
So, in the attributes section, you can manually add attributes by clicking “Add new,” or you can select pre-made attributes from the “Add existing” dropdown.
After you select an attribute, you need to add the terms in the “Values” box. And then click “Save attributes.”
[Note: repeat this step to add multiple attributes.]
Now, move forward to the “variations” section. Here you can generate variations automatically or add them manually.
Click “generate variations” to add variations with the attributes you added automatically.
Step 5: Add Variation Images
Once all the variations are created, click on it to expand and get options to add more details on the variation. You can add product price, sale price, add Image, select stock status, and more.
To add an image, click the “Upload an image” icon. It will open the media manager, where you can add images.
Repeat the steps for each variation, then click the “save changes” button just below the variations list.
Now, Publish the product by clicking the “publish” button.
And you are almost there to add variation swatches.
Step 6: Install and Activate ProductX
If you want to show variation swatches, you need to install ProductX. Go to Plugins > Add new. Search for ProductX. Then install and activate ProductX.
Step 7: Enable Variation Swatches Addon
Once you activate the ProductX, you can enable the variation swatches addon to use variations swatches in your store.
Go to ProductX > Addons, and look for the “WooCommerce Variation Swatches” on the addon page. Use the Toggle Bar to enable it.
Step 8: Configure Variation Swatches
Now, let’s see how to configure the variation swatches from settings. After enabling the variation swatches addon, you’ll find a settings icon to configure it on the addon page.
In the settings, you can set the following:
- Enable / Disable Tooltip.
- Choose a Shape Style (Color, Image) from 2 variations: square and circle.
- Dropdown to Button. Select this to convert WooCommerce’s default dropdown to a button.
- Adjust the button’s width/height.
- Enable / Disable swatches in the shop/archive page.
- Product Image in Swatch. Enable it to show the Image in the variation, which automatically comes from the product image.
- Swatches Position to adjust the location of the swatch.
After configuring the settings as per your requirement, click “Save Settings” to apply the configuration you did.
And you’re done setting the variation swatches. Now let’s see 2 different ways of displaying variation swatches.
Display Size and Color Variation with Variation Swatches
Now, select the variable product from the shop page. You will see variation swatches, including the color and size selection options.
Display Image as the Variation with Variation Swatches
To display images of the product instead of colors, you can do it easily.
Go to Products > Attributes. Now select the “Color” attribute to edit it.
In the “Type” dropdown, select “Image” Instead of “Color,” and “Update” it.
Now in the ProductX Variations Swatches addon settings, enable the “Product Image in Swatch” by clicking the checkbox. Then click “Save Settings.”
Going to that variable product will show the product image instead of the color in the variation swatch.
[Note: you must add a product image in each variation as we did in step 5]
And that’s how to add variation swatches in your WooCommerce store.
Benefits of Adding Variation Swatches for WooCommerce Store
User experience is a critical factor in the success of an eCommerce store. Store owners are understandably concerned about the user experience of their stores. One way to improve user experience is to add variation swatches.
WooCommerce, by default, allows store owners to add different variations. However, the default interface for displaying variations is a dropdown list. This can be inconvenient for users, as they have to scroll through a long list to find the variation they want.
Variation swatches solve this problem by transforming variation dropdown menus into clickable swatches. This makes it easy for users to select the variation they want without scrolling through a long list.
In addition, variation swatches make the purchasing process more straightforward. This can increase sales, as users are more likely to buy a product if they find the buying process easy.
Variation swatches are a simple way to improve the user experience of a WooCommerce store. They can lead to increased sales and a better overall customer shopping experience.
Conclusion
In conclusion, variation swatches for WooCommerce stores are a great way to improve the user experience and increase sales.
Following the steps in this guide, you can easily add variation swatches for your WooCommerce store and enjoy the benefits. If you want to make your WooCommerce store better, adding variation swatches is a great place to start.
