As one of the world’s leading eCommerce platforms, WooCommerce wows customers with spectacular opportunities and always introduces new features.
When selling online with WooCommerce, there is no doubt that if you want to offer products in different variations, such as size or color, the ideal approach is to apply variable products. This is the ultimate method for attracting more clients and increasing sales by providing a complete overview of products.
Fortunately, with Woostify, you can effortlessly add color, size, and photos to a single product, giving your website a professional appearance. In this article, we are presenting an ultimate guide on adding product variations in WooCommerce with the Woostify Variation Swatches addon. At the end of the post, we will also share with you some useful tips for optimize WooCommerce variable products to boost conversion rates.
Table of Contents
What are variable products in WooCommerce?
Variable products in WooCommerce enable you to sell a single product in multiple variations, each with a different price, stock availability, pictures, shipping class, and so on. Each product can be managed differently. You may generate several variations of a single product without having to start from scratch each time.
Variable products allow you to provide a wide range of options to your clients in terms of size, color, and material at a variety of pricing.
Variable products can be utilized in a variety of industries. Some of the most basic examples are provided below.
- Clothes like T-shirts, coats, jeans, pants, etc. in various sizes for your customers to choose.
- Different topping options for your pizza.
- Many product material alternatives for mobile cases, book cover material, and so forth.
Why you should add variable products in WooCommerce?
When it comes to purchasing a product, customers always want options. They are interested in whatever thing you are selling. Because everyone wants to buy the best goods possible. Variable products allow you to offer multiple options for a single item.
This can be product variation in terms of color, size, and so on, allowing your customers to select the best product for them. Different pricing can also be configured for your WooCommerce changeable product swatches. Aside from that, the WooCommerce variant has further advantages. Here are some of the benefits of introducing product variations to WooCommerce:
It increases consumer happiness since it allows them to select the products they desire by providing them with many options through product variation.
By incorporating this WooCommerce function, you can set your online store different from the competition.
Customers that have a positive shopping experience will suggest your store to their friends and family. Adding WooCommerce variants allows you to do word-of-mouth marketing as well.
This will enhance your company’s sales and revenue because your clients will be able to buy various things if they have multiple selections.
When your customers get the exact product they desire, product variation will boost the brand value of your business.
These are the advantages of product diversity for your eCommerce store. Let’s look at how to add these variable products to your WooCommerce store now.
Does WooCommerce allow you to create product variations by default?
WooCommerce allows you to add six different product attributes to your store by default. Only variable items allow you to provide numerous purchasing alternatives for the products you sell in your store.
For example, an electronics store may carry the same mobile phone in a variety of storage and color choices.
To provide your customers with the option of selecting from multiple product variations (which are also known as attributes), you can simply tick the Variable Product option when adding the product to your WooCommerce store.
After adding attributes and variations to the store using the default WooCommerce feature, you will have a dropdown menu with variation options as in the image below. It is so different from the options created by a variation add-on that we will introduce in the next part. Please keep reading to see it.
Since WooCommerce, by default, provides a great deal of flexibility and utility for product variations, extra plugins can help you add even more functionality to your variable products. In this instance, we recommend you a powerful tool that helps you a lot in carrying out this task. That’s Woostify Variation Swatches.
Adding variable products in WooCommerce using Woostify Variation Swatches
Woostify Variation Swatches is a pro add-on created by Woostify. It allows you to create multiple types of product attributes such as images, colors, sizes, and labels. Once you add these attributes to variations, your store will have variable products displayed in a much nicer way.
Variation swatches will create customer engagement more easily than a variation dropdown menu created with WooCommerce default. They not only make product pages more eye-catching but also help improve customer experience because they won’t need to click on the dropdown to make variations appear.
Moreover, to make it most convenient for users, the add-on provides them with the options to customize the style and size, enable quick view and tooltip, and display on the shop page.
Using Woostify Variation Swatches, you will need no coding or any special technical skills to add variations to your WooCommerce products.
Our video guide on how to add variable products in WooCommerce
This video is made to help users learn how to add product variations. Let’s watch it if you want to clearly see the step-by-step guide. The video will cover:
- Download and install Woostify Pro
- Enable Woostify Variation Swatches
- Set up Woostify Variation Swatches
- Create product attributes
- Add variations to products
Follow the detailed process below to know how to add variable products in WooCommerce with the addon.
Step 1: Activate Woostify Variation Swatches in your store
The very first step is to activate Woostify Variation Swatches in your store. Of course, you need to have already installed Woostify Pro on your WooCommerce site.
Login to your WordPress dashboard, and go to Woostify Options. Then, you will see a list of Woostify premium addons. You need to find Variation Swatches, and hit the Activate link text.
And then click Settings to start creating product variants.
Step 2: Setting up Woostify Variation Swatches
In this step, you should customize some settings in Woostify Variation Swatches.
- Style: In this section, you can set the attribute style between Rounded or Square shape.
- Shop page: Tick this option if you want to display swatches under the item on the shop page, which may be the category page or product search results page.
- Quick view: Check this box if you want to show swatches on the quick view popup.
- Size: You can fix the size of the swatches on the single product page in this section. The unit is pixel.
- Tooltip: By ticking in this option, you can show a swatches tooltip on each product attribute.
- Tooltip background: Here, you can change the color of the tooltip’s background.
- Tooltip text color: Here, you can change the color of the tooltip’s text.
- Limit variation threshold: This section shows the number of available variations.
- URL variation active: Check this box if you want to display the variation of the product on the URL when customers select that variation.
When finishing, do not forget to click the Save button on the page bottom.
Step 3: Create Global Attribute Variations
Once completing the setting stage, you now need to create global attributes for your online store by navigating to the Products menu, and then clicking Attributes.
On this settings page, you can create and customize all of your new global attribute’s properties:
- Name: This is the title of the attribute (such as ‘Color’ or ‘Size’) that appears on the front end of your site. It is the first property with which your site visitors will engage.
- Slug: In addition to the main attribute name, you can specify another variation to your attribute. If present, the slug substitutes the attribute name in the Universal Resource Locator (URL).
- Enable Archives: You can also enable archives for the attribute you’re defining. When this option is enabled, WooCommerce generates a page containing all of the products connected with this attribute. You can then simply view the products by following the page’s URL (for example, https://yourstorename.com/color/red/).
- Default sort order: This section will decide how you want the terms in this attribute to be sorted on the front-end. There are 4 options for you to choose from, such as Name, Name (Numeric), Term ID, and Custom ordering. For instance, you can go for the Name selection. This means that if a ‘Size’ attribute has the values like ‘Small’, ‘Medium’, and ‘Large’, these terms will be listed in an alphabetical order. Likewise, you can select Custom ordering to drag and drop the terms on the next page.
When you finish all changes, press the Add Attribute button on the page’s left bottom to store your selections. After you’ve created your first global attribute, click Configure terms to add the needed values.
After that, you can start adding new terms or editing existing ones. There will be a new option at the end of the form that allows you to pick up the color, upload images, or type the label for those terms.
You can repeat this step to create other global product attributes for your WooCommerce store.
Step 4: Set the product type as Variable Product
In this section, you should choose the product you want to add variations. If the products haven’t been added to your store, you need to add them to your WooCommerce site easily by navigating Products > Add New button and then filling in the “Add new product” page with the necessary product information like Product Title, Product Description, Product Image, and more. Finally, remember to save the new product by hitting the Publish button.
In case you have already added or imported your products to your WooCommerce store, from the left side menu, go to Products > All Products, then click on the Edit link text under the product you want to add attributes.
On the product setting page, scroll down to the Product Data section. You can see Product Type, just select the Variable product from the dropdown selections.
The options menu is changed immediately to assist you in configuring your variable product. You are able to define the product using different tabs, including Shipping, Linked Products, etc.
In terms of Attributes and Variations, let’s read them in detail in the fifth step.
Step 5: Enable Attribute Variation in WooCommerce Variable Product
The next step is to make some settings with the Attributes and Variations section.
Attributes tab
First, you should head to the Attributes Tab under the Product data section. Choose the Custom product attribute from the dropdown options. After that, you will see all the global attributes you have created in step 3. Because we have only added a color attribute, it is now displaying the Color attribute shown in the image below.
Now, you can pick the Color attribute and click on the Add button. Then,you can see the following screen appears. There are some ways you can do to assign different variations to the product.
In case you want to assign all available variations of the color attribute to the product, you just need to hit the Select all button.
If you change your mind and do not want to select all variations you have chosen at once, just click on the Select none button.
You also need to check the Visible on the product page and Used for variations option to show product attributes for customers in your store’s front-end.
Once finished, do not forget to click on the Save Attributes button.
Variations tab
Now, you are getting into the Variations tab. Press on the Add Variation dropdown. There are 2 options for you to choose from, which are Add Variation and Create variations from all attributes.
In this article, I want to generate variations from all attributes I have created, so I will select the Create variations from all attributes option, then click on the Go button. It will then add all available variations as below.
As you can see, Blue, Green, and Red color variations are all there. For each color variation, you need to add variation information such as item images (with the corresponding variation), prices (normal, and sale-off price if you are offering a discount on this product variant), stock status, Weight (kg), product dimension (cm), Shipping class, product description, and other details. Important NOTE: Don’t forget to include the product’s price in each variation; otherwise, the variation won’t be visible on the product page front-end.
In addition to the information mentioned above, with Woostify Variation Swatches, you can add product variation gallery images for each variation. Once adding an image to each variation, you can see the Add product variation gallery images option shown below:
All you need to do if you want to add a product image gallery is to click on that option, then upload gallery images from your computer. Interestingly, you can add as many images as you want because the number of images is unlimited.
Finally, click on the Save Changes button on the page bottom to save all the changes you have made.
Step 6: Save and Preview
In the last step, hit the Update button on the right side of the page to finish the process of adding variable products in WooCommerce.
Now, you should take a look at your store front-end to check if your variable product works as expected.
If you are not satisfied with the result or want to make further customizations after adding variable products in WooCommerce, you can easily do it by checking this guideline.
Best Practices for Displaying Your Product Variations to boost conversion
If you want to attract customers and grow your sales, you should optimize product variations in your online store.
Below are six of the finest techniques to show variable products that you can try to increase your online sales.
Make sure that labels for attributes are clear
The first recommendation when creating attributes for your WooCommerce store is to ensure that attribute labels are clear, obvious, understandable, and simple. For example, you should use “navy” instead of “blue” to describe the color of a product variant, or use a clear unit like “40 inches” or “20 cm” instead of “tall” when you want to describe the size of an item.
Allow customers to have a clear view of each variable product with an image
The next suggestion you can try to make your WooCommerce variable products better is to give buyers a clearer view of each variable product by offering an accurate, detailed, and high-quality image that is easy to preview.
This provides clients with a clear picture of the item because they may be imagining a different shade of pink than the actual color of the product.
As I mentioned before in step 5, you can easily add a product image gallery to each product variant. That is also a reason you should use Woostify to add variable products to your WooCommerce store.
Enable customers to add several items to their shopping cart simultaneously
Allowing customers to add several items to their shopping cart at the same time will encourage them to buy multiple variants in one transaction. This can also help you rocket your sales and bring you much more revenue.
Managing stock based on each variant
In WooCommerce, you can manage stock, for example, the number of your products, and backorder service.
You can edit a variable product under the Inventory tab under the Product data section or within each variant.
It is preferable to use the manage stock option within each variant rather than the Inventory option. Because this gives you control over how many items of each variant are available. If one variety is sold out, you can make a note of it in your store. You may leave a note like Preorder or Out of Stock if that variant is running out.
Besides, buyers will not know if a specific variety is available if you control quantities from the Inventory tab.
Explain any differences in prices of your variations
If the prices of variations are not the same, you should explain why it happened. Consumers want to know what they’re paying for and feel like they’re getting their money’s worth. Explain why this product variant is more expensive than the other options. Because it is made of better materials? Or because it has a more beautiful design? Or because it is shipped from a different place? Or because it has more positive reviews than other options? Possessing such transparency would eventually help your store gain the trust of the customers.
Adjust the slug to match the main product variation
This aspect can be easily obtained by using Woostify theme. While adding variable products in WooCommerce by using Woostify Variation Swatches, in step 2 of the tutorial shared above, you just need to tick the URL Variation Active option, and preview the to check the result.
Bottom lines,
Product variations allow you to offer many selections for a single product so that clients may choose which one they prefer. While there are a few secrets to using this feature, once you get used to it, listing products with as many variants as you want becomes simple.
Adding variable products in WooCommerce becomes pretty simple by using the Variation Swatches addon – a Woostify premium feature. Just follow the methods described, and you’ll be able to optimize product variations and generate more sales.
Hopefully, this solution worked and contributed a little to your company’s success. If you have further questions or recommendations on adding variable products in WooCommerce, please let us know by leaving a comment in the section below or sending me an email.
Introducing WoostifyBlocks beta - Our new plugin for Gutenberg page builder is ready to test 