2 Main Ways to Add WooCommerce Variation Swatches

woocommerce-variation-swatches

Variation swatches are a useful and necessary feature in any WooCommerce store. With this functionality, shop owners can show various product attributes on their shop pages, increasing shopping experience, and convert more sales. This article covers the general knowledge of WooCommerce variation swatches and guides you on how to enable and customize variable products in your WooCommerce eCommerce site.

Variation swatches are default in WooCommerce.

woocommerce-variation-swatches-1

Basically, WooCommerce offers available variation swatches. However, it is very simple without any pre-built options. You have to create product attributes by yourself. If you want to add more product attributes to your shop, you need to upgrade the functionality to the next level.

Below are 2 main ways for you to include more variable products to your WooCommerce store.

Method 1: Using Variation swatches addon in Woostify WooCommerce theme

This is a way that you can add WooCommerce Variation swatches without plugins, but leverage a addon in Woostify theme.

Woostify is a fast and powerful WooCommerce theme that provides users with various interesting features such as sale notification, full customization overs shop pages, countdown timer, simple checkout, etc, which are required in any online store. Woostify offers Variation Swatches that allows you to add colors, labels, and images attribute to your product pages.

How to create variation swatches with Woostify?

To create WooCommerce variable attributes, you may need to follow the process below:

Step 1: Download and install Woostify into your site by following this guide.

Step 2: In the Dashboard, navigate to Woostify Options and enable Variation Swatches

woocommerce-variation-swatches-2

Click in Setting to customize the addon within some options as below, and then save your changes.

woocommerce-variation-swatches-3
  • Style: in this section, you can select the attribute style between Circle or Square shape.
  • Shop page: This option allows you to show swatches under each product item on shop page.
  • Tooltip: You can display swatches tooltip on each product attribute.
  • Tooltip background and Text color: with such features, you can choose the color of Tooltip’s background and text.

Step 3: In the Dashboard, go to ProductAttributes.

woocommerce-variation-swatches-4

Step 4: Dropdown to the Type box. Choose a variation you want to create an attribute.

woocommerce-variation-swatches-6

Step 5: Add a new attribute/ Customize the existing attributes. For example, I create a new color attribute and name it “blue”. Tick the Enable Archives if you want this attribute to have product archives in your WooCommerce store. Remember to click the Add attribute button to save it.

woocommerce-variation-swatches-7

Or should you desire to customize a pre-made attribute, navigate to the Configure terms option.

woocommerce-variation-swatches-8

After that, you are allowed to add specific attribute to the main one as follow.

Here are some detail attributes I have created.

Repeat this process if you want to add more attributes to your shop. And proceed to the next step.

How to add WooCommerce variation swatches to a product with Woostify?

You can easily add some main product variation attributes to your products by following the steps below:

Step 1: Go to dashboard → Product, then select a product you want to customize. If there is no product you desire, you need to click Add New to add a new item, and then edit it.

In the backend of the selected product, dropdown and opt for Variable Product in Product data box:

woocommerce-variation-swatches-9

Step 2: Choose Attributes under the Product data section. Then you can add product attributes by choosing the attribute that you created before.

Now you can select any attribute for your product and display for your customers.

Step 3: Click into Variations under the Attributes part. Here, you can choose to add variation manually by clicking in “Add variation” or automatically apply all attributes by selecting “Create variations from all attributes“.

And customize each attribute separately with different prices, stock status, weight, shipping classes, and much more depending on the specific items.

Repeat this process if you want to add more variable attributes to your products.

Here is how the single product page looks after being added WooCommerce variation swatches:

The outstanding point of using Variation Swatches addon of Woostify is that it run smoothly in only one system of Woostify theme and have seamless integration with WooCommerce.

That’s the process of creating and adding WooCommerce variation swatches without plugins. The second way to add more variable products is by using a third-party plugin supporting this functionality. There are many WooCommerce variation plugins that can help you enhance the shopping experience. In this article, we are presenting how to include more product attributes with the Variation swatches plugin for WooCommerce created by Emran Ahmed.

Method 2: Use Variation swatches plugin for WooCommerce created by Emran Ahmed

Installation and settings

Step 1: Download & Installation

You can automatically install the plugin from your WordPress dashboard. You can search for this plugin directly in the search bar.

woocommerce-variation-swatches-13

This is the first screen that you see right after you install the plugin in your WordPress site.

woocommerce-variation-swatches-14

Step 2: Make some settings

Go to the plugin’s setting and enable the features you want. There are 6 sections you may customize namely Simple, Advanced, Performance, Style, Archive/shop, Special attribute. The free version of the plugin allows you to get all features in the Simple, Advanced, and Performance section as below.

woocommerce-variation-swatches-15
  • Enable Tooltip: By clicking in this box, you can display tooltip on each product attribute.
  • Enable Stylesheet: this allows you to use the default stylesheet.
  • Shape style: in this section, you can select the attribute style between Rounded or Square shape.

Plus, in the Visual section, you are able to clear on reselect, custom Ajax variation threshold, and choose to hide or blur attribute, set the thumbnail image’s size, width, height, and font size.

woocommerce-variation-swatches-16

Besides, the free plugin allows you to delay Load JS and use transient cache to boost the speed of the shop pages.

woocommerce-variation-swatches-17

This plugin also integrates with Quick View, but just on the paid plan. Also, if you want to display variation with Quick View and on the shop/archive page, or unlock other advanced functions in the other parts I’ve mentioned, you need to upgrade to a premium plan starting at $49 per site per year.

Now, let’s go in detail about how to create and add variation attributes to your shop with the WooCommerce variation swatches plugin by Emran Ahmed.

Create variation swatches with the WooCommerce variation plugin

To create variation swatches with this plugin, we can follow the process as we do with Woostify theme.

Step 1: In the dashboard, go to ProductAttributesType.

Besides color, image, label, this plugin allows shop owners to include Ratio attribute to their products. But it is just enabled in the paid plan.

woocommerce-variation-swatches-18

Step 2: Add a new attribute. You can set any of the attribute types for your shop. Name it and click Add attribute to save all things.

You can also edit the existing variation by clicking into Configure terms as below.

woocommerce-variation-swatches-19

Then, you can clarify the attribute with more details such as child attributes and images:

woocommerce-variation-swatches-20

Here is some detail images I’ve created for the shop:

woocommerce-variation-swatches-21

Let’s move to the next process: Add variation swatches to specific products.

How to add WooCommerce variation swatches to a product?

This process is quite similar to the steps you do with Woostify, so you can take a look at it for more details.

Here is how the single product looks after I add the image attribute:

Conclusion on how to add WooCommerce Variation Swatches

Variation Swatches is a must-have feature of any WooCommerce store, which can help to improve the shopping experience and afterward enhancing user engagement to a WooCommerce site. If you prefer variation swatches that are enough for medium-sized businesses and smoothly integrate with WooCommerce combining with other multiple functionalities such as Quick view, full customization over shop pages, etc., then you should choose Woostify which considered a theme and a multi-purpose plugin for eCommerce. If you would like a separate plugin that offers more product variations, you may install a WooCommerce variation swatches plugin.

Above are two main ways that you can apply to create and include variable products to your WooCommerce online store. Please let me know if you have any suggestions or recommendations by leaving a comment below.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Download Woostify Now

Enter your email address and be the first to learn about updates and new features.

stay informed!

Subscribe to receive exclusive content and notifications