Tag: Variation Swatches

Are you setting up your online store with WooCommerce? Great choice.

In 2020, over 26% of the top 1 million eCommerce sites are using WooCommerce. And in total, there are over 5 million sites that are using WooCommerce.

It’s particularly excellent when you need to list products that come in different variations like size or color. But, getting these variable products right can be a bit tricky at first.

Today, I will give you a complete guide on how you can add WooCommerce variable products.

After reading this guide, you’ll able to:

• Add products to your store accurately and without wasting time
• Create product variations for your variable products efficiently
• Optimize your store’s product data to increase sales
• Get actionable tips to improve your variable product page to increase your conversion rate

Let’s get your products set up properly and make your store work harder for you.

Understanding WooCommerce Variable Product

You might have a few products that have multiple variations. For example, let’s say you are selling a t-shirt in 3 different colors. In this case, the t-shirt is a variable product, and each colored version of the t-shirt is a variant.

In WooCommerce, when you add products, you may choose the product type as “Variable product” and then add variants easily.

Once you add a variable product to your WooCommerce, the product page will look like this:

As you can see, you may click on the dropdown menu to select a variant of the product.

Next, you will be able to customize the product page in many ways, such as using suitable plugins, applying a WooCommerce theme, or by customizing the page’s design on your own.

For example, you can use a plugin, Variation Swatches for WooCommerce, to display the variants in the form of swatches.

As you can see, you may click on the dropdown menu to select a variant of the product.

Now, let me give you a step-by-step guide on adding and optimizing variable products to your WooCommerce store.

So let’s get started.

Step-by-step Guide On Adding And Optimizing A WooCommerce Variable Product

Once you follow the steps below, you will be able to add variable products to your WooCommerce store easily. And later, you will get actionable tips that you can use to achieve a higher conversion rate real quickly.

Step 1 – Create Variable Product Attributes

The first step to properly adding a WooCommerce variable product is to create a variation product attribute and assign its variants.

A variation product attribute is basically the factor by which a product may vary. For example, if a product has 3 color variants, then ‘Color’ is a Variation Product Attribute, and each color is a variant.

So let us learn how to create one.

1. On your dashboard, go to Products > Attributes.

Here, you will see the option to create variation attributes.

2. Input a name and slug for the attribute in their respective fields. For example, you can name it ‘Color’ and assign the slug, ‘color.’

Then click on the ‘Add attribute‘ button below.

You will see that the attribute is added on the right side.

Here, I have added a variable product attributes called Color.

3. On the right side of the attribute, under the Terms, you will see an option called Configure Terms. Click on it.

It will take you to the page where you can add variants.

4. Input a variant name and slug in their respective fields, and add a description to it if you want to.

For example, you can name it ‘Blue,’ and assign the slug ‘blue.’

5. Then click on the Add New Color button below. You will see that the variant is added on the right side.

You can add more variants here. I have added two more, Green and Red.

It will take you to the page where you can add variants.

So far, you have a variation product attribute, and it’s corresponding variants. You can repeat the whole step to add more variations of product attributes and their variants.

These will be used to set up variations when adding variable products to your WooCommerce store.

Step 2 – Add A New Product

The next step is to add a product and set it up as a variable product.

1. On your Dashboard, go to Products > Add New.

It will take you to a blank product edit page to input the necessary data for the product.

Here, you will need to add a few product data; make sure the data is optimized.

As you read on, I will give you relative examples to help you understand how you can optimize the data.

2. Add a Product Name and Description.

Try to avoid using too many marketing schemes on the Product name, but do include the unique features that may make it stand out. And, in some cases, you may include the variant term on the name as well.

In the description, try to explain all the product features so people may learn what to expect when purchasing the product.

If you have size variants, then it is best to include a size chart in the description as well.

Make sure to highlight all the advantages and special features of the product here.

3. On the right side, you will get the option to assign Product Categories.

Here, you may choose a suitable category that already exists or create a new category for this product.

Putting the product within a relevant category is important because people will often search for products based on categories in your store.

4. Add images to your product.

On the right side, you will get the option to add a Product image. Click on Set product image to upload an image.

This is the main image of the product. A person usually notices this image first when viewing the product page.

For the main image, it’s best to use an image that is a collection of all the variations in a single picture, so that people know that they have options.

**You will be able to add images based on variants, which I will show you later.

Make sure the image is clear and matches the product you are selling. Avoid using fake images or enhanced images that look way better than the actual product.

Remember. You are here to do business on a long-term basis. Deceiving people may result in them not buying from you again. The more original you are, the more people will be your regular buyers.

Below the Product Image section, you will be able to add more images in the Gallery.

Try adding multiple images from different angles of the product to showcase it properly.

These are the basic data of the product that you need to add. However, there are more options available such as Short Description and Tags. I will give you tips on how you can optimize them later in this article.

Step 3 – Configure The Product As A Variable Product

Once you have inputted the basic details, you need to configure this product into a variable product.

1. Below, you can see the Product Data Section.

You will see that on the Product data field, it is set as a Simple product.

2. Click on Simple Product and change it to Variable Product.

You will see that the menus below will change.

Here, by default, you will get 7 main menus on the left side (and there may be more depending on other plugins you use).

3. First, configure the General menu.

Here you will get two options:

• Tax Status – Here, you can choose if the product is taxable, or if the tax applies to the shipping cost only, or select the option ‘None’ if the product is not taxable.
• Tax Class – If you mark a product as ‘taxable,’ then you will need to choose a Tax Class, from the ones created when setting up WooCommerce.

4. Next, configure the Inventory menu.

Here you will get three options:

• SKU – This is the parent SKU of the product. Even if you assign this, you will still need to assign unique SKUs to product variants (which I will show you in a bit).

• Manage Stock – If you enable this, you will be able to
  • specify the available quantity of your product,
  • choose if you allow backorders or not, and
  • set a threshold to be notified if the stock is low.
    **For variable products, it’s best to manage stock within each variant rather than here.

• Sold Individually – You can enable this if you accept only 1 item per order for this product.

5. Now, move on to the Shipping menu.

Here, you can assign the Weight and Dimensions of the product, which may affect the shipping cost.

And if you have created a Shipping class when setting up WooCommerce, you can assign that here if it applies.

6. Then comes the Linked Products menu.

Here you can assign products for Upsell or Cross-sell for this product.

• Here’s a guide on how to use them effectively.

It’s best to assign similar products that are better and more expensive, as upsell. They will be displayed as suggested products on the product page.

For example – if it’s a Leather Jacket, then you can suggest more leather jackets that are better in quality and more expensive.

You may also assign products that are related to this product, as cross-sell. They will be suggested to the buyer in the cart.

For example – if it’s a Shirt, you can suggest suitable Jeans to go with it.

I will explain the Attributes menu, and the Variations menu in the next Step as these hold the main options to set up a WooCommerce variable product. For now, let’s take a look at the Advanced menu.

7. Go to the Advanced menu.

Here, you can leave a note for the buyer during purchase and enable reviewing by buyers.

Step 4 – Add Variation Attributes To The Product

You have set up all the basic data in the last two steps. Now, you will learn to create variants for your product.

1. Go to the Attributes menus

2. You can see there is an option that says Custom product attribute. Click on it.

You will be able to select from the variation product attribute(s) that you created in Step 1 of this guide.

I have created three more along with ‘color,’ so you can see four options in the image above.

3. Choose the one you want to use to create product variation for this product and click on Add.

For example, let’s say you want to create color variants for this product. Then choose Color.

You can see, the Color attribute has been assigned.

4. Under values, if you click on the field, you will get the option to choose from the variants you created for this Attribute.

If you think all the variants apply to this product, you may click on Select All, and all the color variants will be added.

You can see that I have decided to add all the variants, Blue, Green, and Red, that I created in Step 1.

**On the right side, you can see there is an Add New button. If you need to add a color that is only applicable to this product, but you won’t need to use it for any other products, you can click on it to add it here.

5. Next, checkmark on the ‘Used for variations‘ option.

This will allow you to create variants of this product, using the variant terms you assigned. Once this is done, click on Save Attributes below.

You have successfully assigned a variation product attribute to this product.

You can repeat the process in Step 4 up until here to add more variation product attributes.

Next, it’s time to generate product variants based on the attribute variants you added.

Step 5 – Generate Product Variations

Now that your attributes have been added to your product, it’s time to generate product variations.

1. Go to the Variations menu.

2. Here, click on Add variation, and select, ‘Create variations from all attributes‘.

3. Then click on Go, and WooCommerce will ask for your confirmation. Once you confirm, variants of this product will be added.

Step 6 – Configure Each Variant Properly

Now, you have to configure each of the generated variants and input proper data.

1. Click on a variant, and it will expand.

2. First, assign a unique value as its SKU.

3. Next, input the Price and Stock Status for this product.

If you have a promotion running, you can include a Sale Price.

You can assign the Stock status as ‘In stock’, ‘Out of stock,’ or ‘On Backorder.’

4. Upload a suitable Image dedicated to this variant.

This will mean that this image will be viewed if someone selects this variant on the product page.

Make sure to include a good image here.

6. Add a Description and assign a Tax class if applicable.

Even if you have added a description earlier, it is still a great idea to add a short description within each variant.

When a person chooses this variant, he/she will get a description dedicated to this variant. So you will have a chance to highlight the uniqueness of this particular variation of the product.

And, if you want, you can enable a Tax class just for this variant; you can change the value from ‘Same as parent’ to one of the classes you created when setting up WooCommerce.

7. You can also assign Weight, Dimensions, and a Shipping class to this variant.

8. Just below the image, you will see a few options. Choose the ones that apply to your requirements.

You will get the following options:

• Enabled – If you uncheck this option, this variant will not appear as a choice on the product page.
• Downloadable – If your product is has a downloadable file required along with the product, then checkmark this option.

**When you mark a product as Downloadable, you will get additional options — attach the file, add a link to the file, assign a download limit, or assign an expiry date as download time.

• Virtual – If you mark your product as Virtual, it means that this product cannot be shipped because it is an online product.

**When you mark a product as Virtual, you will see the fields for Weight, Dimensions, and Shipping Class will no longer be visible.

• Manage Stock – If you want to manage stock for every variant, then you can enable this option.

**If you enable Manage Stock, the stock status field will no longer be visible. Instead, you will get the option to input the quantity available and indicate if you allow backorder or not.

It is best to manage stock based on each variant because there are times when a certain variant may be sold out earlier. Managing it at a product level and not the variant level may result in you answering many inquiries about the variant that is not available.

9. Now click on Save Changes below. Then repeat all the tasks in Step 6 for every variant you generated for this product.

10. Scroll up and on the top right side, click on Publish, and the product will be published.

That’s it. You have successfully created a WooCommerce variable product.

How To Optimize Product Data To Increase Sales

Now, I will give you some tips on optimizing the product data, which will help you to increase your conversion rate.

Most people will give you advice such as ‘Use optimized images that highlight your product’, or ‘Optimize SEO in your product description’, and so on. Now, it’s true that all those are important.

But here, I will provide you with some unique ideas that might give you the edge in increasing your sales even further.

i. Choose A Feature Specific Product Name With ‘Smart Adjectives’

When choosing the product name, you have to keep in mind that this will be the first thing people will notice after the image.

The name should be decided in such a way so that people can instantly know what it is and its most special feature. Plus, you need to use adjectives to describe the product smartly.

Next, you have to understand the purpose of this product.

The t-shirt is an element of style, so you would probably want to use the adjective, Stylish. However, you have to consider the fact that the word ‘Stylish’ will probably have less influence on most men. You might want to use an adjective that’s gender friendly.

The three names suggested above are just examples. However, it is not mandatory to use adjectives on all product names in the same category.

For example – if it’s a single color t-shirt with not exclusive design, then you might be better off naming it ‘Comfortable Plain T-shirt.’ (The word, comfortable is almost always relative when it comes to clothing products.)

If the product has variants, you may mention the variant terms in the product name when someone selects a particular variant.

**In WooCommerce, this cannot be done by default. So you have to use some custom coding to achieve it.

You may also choose to mention all the variation terms in the product name.

For example, you could name it ‘The Trending Super Heroes T-shirt In Blue, Green Or Red’.

Though this may not be as attractive as individual variant names, it is still effective in letting people know of the available choices.

ii. Make The Product Description Worth Their While

When a person reads a product description, it means that the person is interested in the product, but wants to confirm if it has the features he/she needs. And it is your task to grab this opportunity and make the prospect realize that this is the product he/she was looking for.

Most people do not value the product description as much. They simply mention the product features, and that’s it. But believe me, a product description can be a big push towards making a purchase decision.

Here’s a format I recommend that you follow. Create a description in the following order:

Now, this format is only my suggestion, but it works.

Often swapping the third paragraph with the 1st may be a good idea. In the case of some products that are too simple, it’s best if you do not use the third paragraph; rather, combine that with the 1st paragraph.

iii. Use A Short Description

I have mentioned earlier that the main Description either comes below the basic product details or with a tab to click and view.

So, you may rather use the Short Description feature in WooCommerce, which appears just below the title on the product page.

When you edit a product, go to the screen options and enable the Product Short Description option, and it will appear just below the Product Data section.

Here, explain within 3 lines, the product’s main features that people are looking for.

This will help people to realize first hand that it is the right product for them.

iv. Update the slug according to the main product name

When you use adjectives and variant terms in the Product name, publishing it also adds them to the slug or product link.

However, it’s best to use a simple URL slug, rather than a long one.

You can assign a slug when creating a product. Simply go to the screen options and enable the Slug option. A Slug section will appear just below the Product Data section. There, you can input the slug you want.

Or, after publishing the product, you can go to Dashboard > Products > All Products. There look for the product and quickly edit it. Here, you will get the option to input your desired slug.

v. Try managing stock based on each variant

In WooCommerce, you have the option to manage stock, i.e., the quantity of your products, and backorder service.

When editing a variable product, you can either do it in the Inventory tab in the product data section or within each variant.

It’s best to use the manage stock option within each variant rather than the one in Inventory. This will allow you to control how many of each variant is available. In case one variant is sold out, you can mention that in your store.

Here, if you control quantities from the Inventory tab, buyers will not know if a particular variant is available.

Apart from these 5 tips above, do remember that it is still very important to apply SEO optimization on the Product description. And it’s best to use optimized images that highlight the best features of the product.

I’ll repeat another important tip. Please refrain from using fake images to sell your products.First, many people use images of a product and then deliver replicas that do not look identical. They do not meet the feature requirements that were claimed in the description. For example, If you are saying it’s an original Jersey, then it should be original. You can’t just send a replica.Second, do not edit your product images to such extent that it looks way better than it actually is, or looks different from the actual product. For example, do not turn a purple dress into a pink dress. Stating that ‘Color will slightly vary from real life’ doesn’t justify such high difference.

How To Customize The Product Page To Increase Engagements

Sure, optimizing product data is very important. But it is also equally important to optimize the product page.

And you can get an extra edge with variable products, and there are more scopes of customization.

Here are a few tips on customizing the product page that is currently working really well for many.

i. Customize your product page to be simple and less congested

Look for a WooCommerce product page template that is not too congested, and makes it easy for a prospect to take a decision on the product.

Many people use templates where too many details are presented right in the first view, which may confuse buyers.

Here’s an example of a clean Product Page –

In this case, you can either directly download custom product page templates such as TemplateMonster’s custom templates, or you may create one using a page builder such as Elementor.

ii. Use variation swatches to offer product variants

This is one of the new trends in the WooCommerce industry.

You can display product variants in the form of button swatches. For example, you can use colored swatches to present color variants, or image swatches to let people choose variants.

It’s a great way to grab the attention of buyers and create curiosity to choose a variant.

Here’s an example of the use of color swatches to display product variants.

You may use the plugin Variation Swatches for WooCommerce to achieve this easily by following a simple guide.

iii. Use an image zoom feature to highlight products

You may let people hover over the product image to get a zoomed view. This will let people check out the product properly.

It is handy when you sell products with intricate details, such as antique products.

This may also be useful when you have product variants based on the design pattern.

You may use a plugin Product Image Zoom for WooCommerce to achieve this.

iv. Use target-based discounts on the product page

You may set target-based discount offers to people and mention them on the product page to influence people to buy more.

Here’s an example of how you can present your discount offers:

You may handle this through plugins such as ELEX WooCommerce Dynamic Pricing and Discounts.

v. Add a quick purchase option on a product page

One way to ensure the conversion is to make a buyer purchase as soon as he/she is interested in a product.

So, what you can do is you can make it so that a person can complete the purchase instantly. You may achieve this using the plugin Buy Now For WooCommerce.

It’s a simple plugin where a buyer can click on the Buy Now button, and the checkout page will appear as a pop-up so that the buyer can make the payment instantly and get done with the purchase without having to leave the page.

There are so many more customizations you can do to improve product pages. Here’s a list of plugins you can check out to customize WooCommerce variable product pages.

Conclusion

Running a WooCommerce store can be hectic if you do not organize your shop properly. Hence, it is best to learn the proper steps and actions to take when adding products, especially variable products.

Hopefully, if you follow the steps in this guide, you will be able to run a successful WooCommerce store with no difficulties whatsoever. When it comes to selling variable products, the tips will come in handy for you.

Though there are so many more to learn about WooCommerce, it’s best to learn one step at a time. Learning to add variable products in an optimized way is definitely an important step that you covered in this guide.

Also, here is a list of guides you can use to learn WooCommerce in detail. Take your time and learn to set up a proper WooCommerce store so that you can achieve a high conversion rate and increased ROI in the near future.

** FAQs **

How do I manage stock for each product variant?

To manage stock for each variant, go to the “Variations” menu under the “Product Data” section. Click on a variant to expand it, and you will see the option to input the stock quantity. This allows you to specify how many units of each variant you have available. It ensures accurate stock management for each variant separately.

Can I add unique descriptions for each product variant?

Yes, you can add unique descriptions for each variant. When you expand a variant in the “Variations” menu, you’ll find a field to add a description specific to that variant. This helps highlight the unique features and benefits of each variant. It provides more detailed information to your customers.

How do I set different prices for each variant?

To set different prices for each variant, go to the “Variations” menu. Expand a variant, and you will see fields to input the regular price and sale price (if applicable). This allows you to price each variation according to its features or market demand.

How can I add images for each product variant?

You can add specific images for each variant by expanding a variant in the “Variations” menu and uploading an image in the designated field. This ensures that when a customer selects a variant, the corresponding image is displayed. It provides a visual representation of the chosen option.

What should I do if I want to add a unique attribute just for one product?

If you need to add a unique attribute for a single product, you can create a custom attribute directly in the “Attributes” menu of the product. Select “Custom Product Attribute” and click “Add.” Then, name the attribute and input the values separated by a vertical bar (|). Check the “Used for variations” option and save it. This allows you to create product-specific attributes without affecting other products in your store.

Trick or Treat! The spooky Halloween season is here.

Halloween is currently the fourth most lucrative holiday for WooCommerce businesses, after Christmas, Thanksgiving, and Easter.

It’s an event that WooCommerce entrepreneurs cannot afford to ignore.

During Halloween, it is expected to get huge online sales, especially in the last 3 days till Halloween, as people are making last-minute preparations. And you can get huge sales if you do it right.

The first thing to do is give your buyers a Halloween festive feeling as soon as they come to your site. Along with that, little customizations to create engagements can take your store a long way.

You must specifically focus on customizing product pages to grab the buyers’ attention such as changing Add to Cart button text, or by adding an on-page offer, etc.

A more simple but effective way to attract buyers is to use beautiful image variation swatches to present product variations.

Today you will learn how you can present different types of Halloween products in an attractive way using variation swatches on the product page and possibly, get higher engagements.

So, let’s get started.

Special Halloween Variation Swatches Ideas You Can Use

People love to decorate their homes during Halloween and naturally, decorative sell the most during this time. But besides that, people are also fond of t-shirts, masks, candies, costumes, and many other Halloween items.

If you do sell some of these products, it’s best to make sure your buyers know all about your offers in the most simple way possible, while still getting the Halloween vibes.

I’m not talking about a costly re-design of your website. Rather than making your Halloween offers easier to redeem, and adding simple visuals such as variations swatches can catch the eye of the buyers during Halloween.

Let us look at how you can use cool icons as variation swatches for common Halloween products.

Catchy T-shirt Icon Variation Swatches

For t-shirts that are available in various colors, you can present the option to choose the colors using attractive image swatches.

This can be a great attraction around a holiday to the buyers and they will know which colors are available for that design.

For example, a Halloween themed t-shirt might come in several colors. So using colored image swatches of t-shirts is a great way to grab the buyer’s attention.

As you can see above, you can specify the available colors for this t-shirt and make it look charming using tiny image swatches.

This will often get buyers curious to click and choose multiple colors of the same t-shirt, even if they did not intend to in the first place.

Delicious Fancy Candy Swatches

Candies are the most desirable delicacy during Halloweens and kids get well dressed in costumes to collect candies in the neighborhood. So you can expect to get a lot of orders for various candies.

And you can offer your candies in an exciting way using tiny candy icons.

The idea is to put up different shaped candies as variants and present them using attractive variation swatches on your WooCommerce store.

This will work really well especially if you have fancy candies that are prepared and shaped just for Halloween.

For example, you can use image variation swatches such as a spider icon to represent spider-shaped candy, and pumpkin icons to represent pumpkin face candies, and so on.

The swatches will let the buyers know that you have all the Halloween candies they were looking for and will surely help to trigger more sales.

Spooky Mask Image Swatches

Costumes are in high demand during Halloween, so naturally, they are a bit expensive during the occasion. So many rather buy scary masks along with Halloween t-shirts.

If you are an online clothing store or costume store, I am expecting that you will consider stocking up Scary Masks to sell at least during Halloween.

And to get people excited about the different masks you have, you can present the variants using mask icons.

For instance, if your store is selling V-killer venomed masks this year, make sure to include a gallery with the different types of killer masks you have in stock.

And spice it up a little more with tiny mask icons to choose the shapes. This might seem like small customization, but it will help to make the buyer more curious about what they might get.

Haunting Lantern Icons To Choose From

On Halloween, the witching hour starts as soon as the sun sets, so people love to decorate the house with some festive lanterns.

If you do sell lanterns, get various lantern icons to use as variation swatches and offer the buyers the different shapes and colors you can deliver.

Normally, images for lanterns look amazing. But the dull dropdown selection on default WooCommerce doesn’t look too appealing.

You can see in the image above, the small image swatches of the lanterns look much more festive for Halloween.

Witch Hats In Various Spooky Patterns

As I said, costumes have high demand during Halloween, and witch hats are among the most popular ones that girls and ladies love to wear at Halloween parties.

Offer witch hats in various patterns using relative image swatches on the product page.

Clicking on the icons will display the hats in that pattern. A great way to engage with interested buyers.

How To Find Halloween Icons For Variation Swatches

So far you just saw how it will look with variation swatches, but how will you get those icons?

It’s best to use images or icons that are relative to the product itself when using image variation swatches.

I only showed you examples of 5 products, but there are tons of other products, and preparing custom swatches might be a hassle. Rather you can find these icons or vector images to use as Halloween variation swatches easily.

Here is a list of sites where you can collect your desired icons or images in high quality, and most often, for free.

How To Use Image Variation Swatches Real Quick

Adding variation swatches is really easy in WooCommerce.

Simply use the plugin Variation Swatches for WooCommerce, and in just a few minutes, you can set up image swatches for product variants.

This is probably the smallest customization you can make, for a great advantage in increasing your sales.

Moreover, you are able to do it without any extra cost. So go ahead and start using smart variation swatches to boost your Halloween sales.

Final Thoughts

Special occasions should always be considered a great opportunity for any WooCommerce store to increase sales, and Halloween is one of the biggest occasions there.

So it’s best to find unique ideas to boost your Halloween sales, and using smart image variation swatches can be a great way to attract more buyers.

There are many more unique techniques you can use to make your Halloween more profitable. Here is an actionable guide you can follow to successfully sell more products during Halloween:

• Unique Marketing Techniques To Increase Halloween Sales For A WooCommerce Store

I wish you good luck to get a high number of sales this year.

Happy Halloween!!