f you own an online store and display a long and diverse list of products that include different types, items, and sizes, and you are looking for a suitable way to price these types of the same product differently, then the solution is very simple. All you need is a WordPress plugin and some simple steps.
Suppose you own an online store to display and sell many products, and each product includes multiple sub-types. For example, when you sell a product that has three colors (red – white – black), each color has its own price that is different from the rest of the other colors. Or you may have A product of variable size or quantity (1-2-3 kilograms) and each weight has its own price, so a different pricing strategy is necessary for each product.
In this article, you will learn how to create multiple price variants and types for the same product in your WooCommerce store in simple steps.
The Woocommerce add-on provides the ability to create a product with multiple types and variants, so we will first begin by explaining how to create variants and types of products with the tools that the add-on provides by default. Then we will move on to how to use one of the specialized plugins within WordPress to control the look, appearance, and settings of types and variables in a more professional way.
First: Create products of multiple types and variants from within the Woocommerce settings
The following image shows an example of a product displayed in an online store. We notice how variables specific to the product specifications were set, such as size, as well as variables specific to colors.
The customer can choose the color and size that suits him when ordering the product, and based on that choice, the price offered to him may differ according to the pre-determined settings for each type or class of product.
First, we will assume that you have a ready-made online store that uses the Woocommerce add-on to create and manage online stores .
We will first create the variable attributes that we want to appear on one or all of the products in the store. Then we will go to the product edit page and add those variables for a specific product, specifying the price for each of those variables for the different types.
Create variable attributes for products in woocommerce
This is the first step in our journey, where we will create the variables that we want to assign to the products, such as color variables, sizes, or any other variables suitable for the products in your store.
Then we go to the WordPress control panel < Woocommerce < and then go to the ( Features ) tab, as in the following image.
When we enter the (Attributes) tab , a page will appear to us where we can add any variable attributes, which we can attach to any product we want later. For example, let’s say we’re creating variable attributes for products related to color, material, and size.
We will now add these three attributes as in the following image.
The next step is we want to define the types inside those attributes, for example inside the “color” attribute we will set the values (red – white – black). Also inside the “Size” attribute we set the values (X – 2X – 3X). Also inside the “Material” attribute we set values (cotton – linen – polyester).
These values can be easily set by clicking on the (Configure Elements) button located next to each of the attributes that we created previously, as in the following image.
When we click on the (Configure Elements) button next to the color attribute, a new window will appear in which we can add the names of the values that we want to assign to the color attribute.
In the Name field, we can write the name of the value we want to set, then click the Add button at the bottom, and repeat the process to add all the values we want for that attribute (of color).
In our example here, we added three color values, namely red, white and black, as shown in the previous image. In the same way, we will assign the “Material” variable through the Create Items button and add three values for the material, let them be: polyester, linen, and cotton.
In the same way, we will go to the (Size) attribute and add three values to it, which are 3X, 2X, and X.
Now when you go to the Themes tab from within the WordPress control panel, you will find the themes you added attached to the current list of themes, and next to each theme are the values for its variable types.
Add variable attributes and types to a product in the store
So far we have set attributes and variable values to which in-store products can be linked, and in our example we have assumed that we are dealing with a store that sells clothing products of multiple colours, materials and sizes.
The next step is the most important, which is to link one of these variables to one of the products available in the store. You can create a new product to apply the variables to it, and you can also apply them to existing products in your store by opening the Edit Existing Products page within your store, as shown in the following image. .
After entering the product editing page, we scroll to the bottom of the editing page to reach the part related to (product data), and you must make sure to choose the product type (multi-type product) as in the following image.
After setting the product as (multi-type product), we will go to the (Attributes) tab in the same pane and choose the variable attributes to add to the product as shown in the following animation.
As we can see in the previous image, we chose the attribute (material) and clicked on the (Select All) button. The variable values for the material that we had previously added appeared before us, which are: polyester, cotton, and linen. Then we clicked on the option (used in types) so that they appear on the product purchase page. Then we clicked the (Save Attributes) button.
Then we repeat this process for the rest of the attributes, color and size in our example, and then click the save button.
With this, we have added the three features (material – color – size) to the current product. After that, only one step remains, which is to add these types to the product and specify the price for each type that we want to set within the product page on the store. To determine the types and prices for each type, we can go to the (Types) tab and click on the (Add Type) button, and start creating different types of the product, such as creating a type consisting of 3 different values of material, color, and size as follows: (Polyester – White – X) .
We see in the previous animation how to create a custom product type, and set the price for that type only. In the same way we can create multiple other custom types for the same product.
After specifying all the types that we want to assign to the product and setting the price for each of these different types, we can go to the front end of the product page and preview it, and we will notice that the customer can now choose his favorite type from the options that appear in front of him, and you will notice that the price changes according to the variables that the customer selects. While browsing the product.
Second: Use the WordPress plugin to customize variables and types of products in the store
In previous periods, we learned how to set different attributes, types, and prices for the same product on your store. This method meets the needs of most online store owners who want to customize and specify different types of products.
However, there are many free WordPress plugins that provide you with more options for customizing and modifying the look, feel, and display of these various types and features of your store’s products.
For example, you can use the Variation Swatches add-on , which customizes the “color” attribute of the product, for example, to display real colors, such as white, red, or black, instead of displaying only the color names. In addition to many other features and formats that the add-on provides you.
The first step is to install and activate the plugin on the site, after which we will go to the (Themes) tab from within the WordPress control panel and go to the page for editing the (Color) theme, for example, as in the following image.
When you enter the color editing page, you will notice that a new tab appears named ( Type ). Through this new setting, we will choose the value Color and then click the Save button, as in the following figure.
Now we will go to the “Configure Elements” page for the color theme in order to customize the colors to appear instead of the names in the color selection box, as in the following image.
A new page will appear containing the values for the color. We will now click on the ( Edit ) button for any color, let it be red.
The color editing page will open for you, and we will notice the (Color) tab, from which we will select the color to be shown instead of the color name on the product page.
Save the page, and repeat this procedure for the rest of the other colors to choose the color that represents each of the color names, then go to the front end of the product page to preview it and you will notice that the product’s expressive colors appear instead of the color names, so that the customer can click on his favorite color visually.
In the same way that you edit the color appearance, you can change the look and feel of any other product attribute. For example, you can access the editing page for the “Material” attribute.
The material editing page will open for you, in which you will find the “Type” tab, where we can choose to customize (Button) instead of the traditional drop-down list for arranging and displaying items.
Now save the page as before and go to the front page of the product in your store, and you will notice that the look and feel of the material attribute has changed to buttons instead of a drop-down list, as in the following image.
In exactly the same way, you can change the look and feel of the “Size” attribute, by entering its editing page, then from the “Type” tab we select the option (Radio), for example, instead of (drop-down list).
Then refresh the page and go to the front page of the product on the store to notice that the look and feel of the size has changed to appear as a multiple choice instead of appearing previously in the form of a drop-down list.
Warning : When there are multiple types of products in your store, be sure to display the types that are already available and do not display types that are not available in your stock so as not to cause inconvenience to the customer who sees his favorite type of product, but unfortunately it is not available or available at the present time.
Conclusion
Customizing the product page within your online store and specifying the product description and types accurately helps the customer choose the product and type that is suitable for him easily. The more options are available to the customer, the more comfortable he feels with the product, and the process of choosing the appropriate type becomes easier and simpler for him.
You can now go to your online store’s control panel and customize the different types of your products precisely and in more detail in order to provide a more interactive and useful user experience for your online store’s visitors.
