How To Add WooCommerce Product Variations With And Without Plugins
- Last Updated: Apr 6th, 2019
- Posted by: admin
- Category: Wordpress Plugin
The world requires to overcome everything! So, why we behind in case of WooCommerce product variations. Hence, we brought one of the best tutorials to add WooCommerce product variable. Further, we also have explained here WooCommerce product variations plugins that will help you to improve product variation of your WooCommerce store.
Fast forward, By default, the WooCommerce shows the product variation (Option). That’s why, being an e-commerce business owner, if you sell products in various variety – for ex; size and color – so using the variable product feature is the best solution. This feature is not only good to attract more customers but also increase your sales.
Therefore, satisfy your customers and boost your sale by adding size, color, images to a single product with WooCommerce. Have a look at how to add WooCommerce product variation database. But before this let’s get a bit overview on a variable product.
What is a Variable Product?
A WooCommerce variable product is a standard product type allow you to offer a set of variations (different colors, sizes, prices) of a product to their customer. Means, it shows a number of attributes from which your customers can choose as per their choice. Note that when you add them to your WooCommerce setup, you need to apply attributes, terms, and variation to your products.
For example, you can add shoe size and color as a variable for the shoes you sell on your WooCommerce store. When customers come to your website to buy shoes, they can choose their size and color as per their like and only have to choose between the ones that fit.
Later to reading this, come to the point;
How to add WooCommerce product variation pre-select option?
Follow the simple steps to add your product variation easily, elaborated are as follows:
Step 1: Set up products attributes
Before creating the variations for products you have to manage products attributes. To do this:
- Open your WordPress dashboard and go to WooCommerce>>Products>>Attributes. And select the Attributes.
[Image Source: www.shopping-cart-migration.com]
- Thereafter, put your attribute name in the name section and enter the slug option (optionally) and tick the enable archives box if you want to allow your customers to browse by your product attributes.
- Now, in a type section, opt Select option if you want the same attribute values for your complete store.
- Choose the Text option if you want to type a new attributes values.
- Thereafter, choose the Default sort order (“Name”, “Name (Numeric)”, ”Custom ordering” or “Term ID”).
- After that, press the “Add Attribute” button.
- Here, you have to select the “configure terms” button to add attribute values.
- Then add a New Attribute name. Here we add three new attributes such as Small, Medium and Large.
- Now, you can add the global attributes before creating variations – so be continue to add the global attributes to products – that are site-wide or interpret custom ones specific to a product.
Step 2: Add attributes for products
- In your WordPress dashboard, go to the Product>>Add Product or Edit an existing one.
- Now, you have to choose the variable product from the product data dropdown. Select one from the list and press the Add button. For example, if you choose the size.
- Under size option mention the size (small, medium, or large) that you want to show and press the “Select All” button, thereafter, to save your attributes click on the Save Attributes button. You can see screenshot below:
- Remember that you can now add only one attribute for a single product if you want to add unique variations of this product, then go to Product>>Add Product>>Attributes and select the custom product attribute, thereafter follow the same steps that we have mentioned above.
Now come to the point –
Step 3: Add the variations
- To add the variations – in your dashboard go to variation section and select the Add Variation option from the dropdown menu.
- Thereafter, select the attributes for your variation such as colors, sizes, etc.
- Then add your variation’s image – To add the image expand the triangle icon and click the blue image icon, now upload the image as per your choice.
- Now choose the relevant category for your variable product and click on the “Publish” button.
If you want to edit your product variations – so have a look:
How to edit many variations?
If you want to add more than 10 variations, you can add by using the forward and backward button. Each time you will add a new set of variations, the previous are saved. You can see screenshot below:
[Image Source: www.docs.woocommerce.com]
We suggest setting defaults you prefer on variations. For example, here we have no defaults set – customers can choose any choose colors and sizes as per their choice from the product page.
Further, if you want a specific variation that has already chosen by a customer on a product page, so you can set those. This also allows the “Add to Cart” button to appear automatically on a variable product page.
However, you can set the default only if at least one variation has been created.
- Enabled – It enable or disable.
- Virtual – In case the product is not shipped or physical, then the shipping settings are removed.
- Downloadable – If this variation is downloadable.
- Sale Price (optional) – Set this variation price when it is on sale.
- Regular Price (required) – Set the price.
- Tax Class – For this variation Tax class is useful in case you are providing variations spanning various tax brands.
- Tax Status – Taxable, shipping only, none.
- Downloadable Files – Displays in case Downloadable is selected – You can add the file(s) for users to download.
- Download Expiry – Displays in case Downloadable is selected. Mention the number of days before a download expires after buy.
- Download Limit – Displays in case Downloadable is selected. Mention how many times a user can download the file(s). You can leave blank for unlimited.
- SKU – Set the SKU (if you use) or leave the blank to use the product’s SKU.
- Manage Stock – To manage the stock at the variation level you need to tick the box.
- Stock Quantity – It displays in case manage stock is selected. Therefore, input the quantity stock for a particular variation, or leave blank to for using the stock settings of product.
- Allow Backorders – Select how to manage backorders.
- Low Stock Thresholds – Put a number to be notified.
- Sold Individually – Allow only one per order to be sold. (However, the product itself use this setting. You cannot set a particular variation to only sold one per order.)
Set Stock Status: because it can be applied on all variations at one time to In stock or Out of Stock.
- Weight – Set weight for this variation or leave the space to use the weight of the product.
- Dimensions – Set height, width, and length or leave blank to use the dimensions of the product.
- Shipping class – Shipping class may affect shipping. Set the shipping class in case it differs from the product.
If the SKU, dimensions, weight, and stock fields are not set, then it inherits values to the variable product. But, setting price fields per variation is compulsory.
How to do bulk editing?
There is also you can edit bulk-variation by choosing the particular piece of data that you want from drop down. For example, you wish to edit prices for all variations.
Linking possible variations
You can choose “choose variations from all attributes” option to have WooCommerce create each & every possible combination of variations.
For example, if you have two attributes such as color (with value red and orange) and size (with small and large value), so it creates the given below variations:
- Small Red
- Small Orange
- Large Red
- Large Orange
In case you want to add additional attributes later, so you may require redefined the variables for the variation combination to work correctly.
What customers see?
On the frontend, when customers looking for a variable product, they are presented with dropdown boxes for choosing the variation options. By choosing options, all the information of variation including available stock and price will appear to users.
And, if customers try to click the “Add to cart” without choosing an attribute, so they will appear a message saying them to create some attributes.
Add to Cart does not show in the product archive page because first a variation must be selected before adding add to cart on the product page.
Now we are going to illustrate to you some best WooCommerce Product variations plugin that will help you to improve your product variation feature. But before this you need to know why you should improve WooCommerce product variations feature; let’s have a look:
Why you need to improve WooCommerce product variations feature?
This feature allows you to create specific products that have many variations. For example, color, size, materials and much more. Therefore, WooCommerce is the best choice to start a small online business.
Furthermore, with the help of variable products, you can add variations for a single product like size, images, price, color, etc and any other good features that can be in your product. This contains setting up terms, variations, and attribute.
However, by default, the WooCommerce shows the product variation (options) as a drop-down list. It is simple but looks unattractive and your customer does not observe their interesting products.
Through color and image swatches, it provides a great way to show the available product’s colors, styles, sizes or any other thing that you can display. So let’s just start today’s we are showing you some WordPress plugins that improve your WooCommerce product variation.
All the plugins which we are mention here will allow you to change the standard, choose with WooCommerce icon, dynamic labels, and custom images. Let’s see:
Best WordPress WooCommerce product variations plugins
1. Improved Variable Product Attributes for WooCommerce
Improved variable product attribute for WooCommerce is a plugin that improves the attribute selection in your store. We recommend it to you because it is easy to use and had enough option to improve the features of the WooCommerce Product Variation.
The good thing is to prevent your customers from selecting unavailable attribute combinations and only let them choose the available ones. However, it giving them the option to add to cart only if all attribute terms have been chosen. By using this your online store never shows “out of stock” options again.
You can show the product variation selectors among your customers using text, HTML, colors, and images. Now, add a unique style to your web store and amaze your visitors and customers.
Thereafter show your best qualities on the product store pages along with single product pages. Let your client choose the attribute variation on the product archive pages and add to the cart by using the AJAX without having to enter the single pages or use the plugin to show the attributes on product archive pages.
- Adds custom product option easily.
- Attribute selector support for simple and variable products.
- Translation ready, full WPML support.
- Automatic updates direct on site.
- Unlimited product add-on options.
- AJAX support, seamless integration.
2. Woocommerce Visual Attributes & Options Swatches
WooCommerce Visual Attribute & Option Swatches is the premium plugin to locate the best method to improve the WooCommerce variation feature.
In accordance with users, it is suitable for power users, who had sufficient knowledge to make their product features styles. However, it has flexible features and almost customizable.
Continuously, Woo Visual Attributes Swatches permit you to customize the framework for any variation, dropdown, labels, radio buttons, colors, and pictures are supported. Further, it is covered by allowing you to define the quality configuration for thousands of products in your heartbeat.
- Attribute configuration
- Variation pictures
- Bulk definition
- Fully responsive
- Multiple skins included
- Straightforward, no documentation needed
- Natively compatible with WooCommerce
- Advanced skins editor
3. Woocommerce Color or Image Variation Swatches
Woocommerce Color or Image Variation Swatches is a WordPress plugin shows the selected image size and color. You can change your normal variable attribute dropdown to beautifully looking color or images. By using this you can show images and color in all common size. Means to say, this plugin provides new WooCommerce type attributes to create amazing variations.
- Works on mobile devices.
- Option to use custom attribute label.
- Square as well as round swatch support.
- Global image or color value for Attributes.
- Option to display option name below swatch.
- With the default drop-down mix color or image selected.
- It supports color, Image Select, and Dropdown Select.
- Color, Image swatches compatible with [product_page ] shortcode.
- Shows Color or Image swatches on shop/category/tag archive pages.
- Change Product Image on swatch hovers on shop/category/tag archive pages.
4. WooCommerce Variation Master
WooCommerce Variation Master is an extension by makewebbetter for WooCommerce. It permits the admin to add a lot of gallery images for each variation and when the visitors choose the variation, instead of chooses the main product gallery images the visitor to choose the variation those gallery images will be shown as gallery images. You can add color and image swatches. Also, the admin can allow the buyers to change the selected variation on the cart page.
In addition, it provides a very rich level of customization for WooCommerce product variations. Further, it is very easy to use. By using this, the admin can easily export and import the variation gallery images, color, and images swatches for all variation with the easy global setting features.
Additionally, the admin has full of control to edit the setting for each variation and can disable the images and color swatches for the particular variation. However, the admin can show and hide the attribute name and can change the color/swatch images for the specific variable product.
- Easy Installation
- Simple & Easy Configuration
- Browser Compatibility
- Product Gallery Slider
- Bult export/import
- Variation Swatches
- Variation Customization
- Product gallery with two layout
- Text swatch feature
- Swatch tooltip feature
- Border and Attribute Text
5. JC WooCommerce Advanced Product Attributes
JC WooCommerce Advanced Product features like last entry help with replacing worldly variable product drop-down menus with images, text and color samples but it comes with a few extra features.
For example, you will get the option to choose image thumbnails for a feature. In addition, all attributes of stylings can be easily customized. And this plugin will have the functionality of another added feature group that helps in product management. It will be very happy for users. However, unlike the previous one, you will get the premium WordPress support.
So if you want to sacrifice to get better with that and get a better product management utility then feel free to choose one.
6. Visual Attributes – WooCommerce Variable Products
Visual Attribute is a WooCommerce extension that increases variable products at the place of the dropdown with:
- Text labels
- Color swatches
Therefore by clicking on the visually explicit character element, you can choose each
Instead of clicking on the attributes menu increase the user’s experience in your store by giving them the ability to easily click visual elements. Read the attribute and choose one as per your like.
In addition, visual attributes is also the best for mobile devices. Because instead of laughing the disruptive select interface in iPhone and Android the user can tap the element.
- Fully translatable.
- Use your own custom font icon set.
- Complete Spanish translation included.
- Complete German translation included.
- Good documentation and prompt support.
- Through visual controls, it is easily customizable.
- Show visual attributes only on mobile, desktop or both.
- With the standard select dropdown mix the visual attributes.
- Selects from Genericons or Font Awesome icon font libraries.
- Choose from Genericons or Font Awesome icon font libraries.
- Use the images, colors, icons, swatches and text labels to choose the product attributes in variable products.
- Display the visual attributes in the WooCommerce shop loop, product category, and product tag pages.
- Deactivate them on each & every product at the time of preserving the data.
7. WooCombinator for variable products
WooCombinator for Variable Products plugin hides the elements that have already chosen and renders the button instead of this. But, still, the controller logic is controlled by WooCommerce.
Continuously, you can set your own classes and choose from the 7 pre-determined styles. In addition, you can also write your own inline CSS styles (if there is no other option for editing a custom CSS file).
By default, WooCombinator has tried to reuse the button element of your theme, but you may need some CSS changes. Therefore this plugin converts boring chosen elements into buttons for convertible products.
- Documentation included.
- It has 7 predefined styles.
- Write your own inline CSS rules.
- It includes minified CSS and JS files.
- It supports WordPress Customizer.
- Set CSS classes for elements and states.
- It only changes the display logic – the control logic is still handled by WooCommerce.
- A few CSS/HTML knowledge may be required.
- You will probably need to define your own active and inactive states. It depends on your WooCommerce template.
- To change the behavior of chosen elements you are using the third-party plugin then WooCombinator may not be work.
8. YITH WooCommerce Color and Label Variations
YITH WooCommerce Color and Label Variation plugin can be used to change variable product attributes with icons, custom images, and even dynamic labels. It’s quite a lot of ideal, then all the options you have seen above.
With this plugin, you can also get rid of some incompatibility as well as the box product variation style. It is true that if it can help you in your branding.
Another thing that you need to pay attention – the plugin is extremely versatile and can be used for any product. From clothing to jewelry, you can be assured that whatever your online sales business, plug-ins make a valuable asset.
If you show your product option ia ad hoc images and icons, then you can help to understand your customer properly. As the users come into the page in which the purchase option is available for that product.
For example, the users understand in a few seconds that the T-shirt he/she likes is available in his/her size or favorite color or not. For this moment clicking on “Purchase” button is a short step!
Openswatch is a WordPress & WooCommerce plugin with numerous features to change product variation. It is very useful for each & every WooCommerce store owners. It makes you WooCommerce business friendly and easy to use to your users.
Using this plugin, you can add file follow attribute, price filters, enable & disable swatch color and also pre-select. Apart from adding colors and text for product variation, it offers you many more additional features.
- Easy to use.
- It supports color for swatch icon.
- Support number of variations attributes.
- On each & every product it adds and edits swatch image for variations.
- Turn on/off tooltips for swatch item feature.
- Add function multi images for variation.
- Turn on/off openswatch on every product.
Shoppers appreciate seeing the visual representation of product attributes while using your shop, and it can help make things feel polished and clean.
Improve your WooCommerce product variation with color and image sampling is your answer if you want to increase competition by sprinkling the variable products that available in your shop. We hope this blog helped you. If you have any problem please let me know in the comments.
Our WordPress help number is available for you 24/7. So whenever you get the trouble regarding WordPress talk to our experts and get the best help you need. Dial +1-844-275-0975 (Toll-Free). We will be glad to help you.