Tutorials for web designers and developers
Tutorials for Developers_
product attributes and price variations in woocommerce

After taking this tutorial you must be able to Add Variable Products in Woocommerce site and able to create woocommerce attribute very easily. So let’s start to create some attributes and add variable products in woocommerce.

Variable product in woocommerce is a product type that allows you to add some characteristics like product type, product color, product size, product price and much more. It can be used for a product like a jacket, where you can offer size variations i.e small, medium, large and extra large. Let’s add some jacket sizes and prices in woocommerce


Step 1. Set the product type

To add a variable product, edit an existing product in which you want to add variations.

    1. Go to:  Dashboard > Products
    2. Click Edit on an existing product
    3. Scroll down to Product data (fig 1.1)
    4. Select “Variable product” from the product data drop-down.
    5. Update/publish  product page.

      woocommerce product attributes
      Fig 1.1

Step 2. Add attributes

After setting product type, we add attributes, there are two type of attributes:

  1. Product specific attributes for single product.
  2. Global attributes for all products.

To add product specific attributes:

      1. Go to: Product data > Variable products > Attributes (see Fig 2.8 below)
      2. Select “Custom product attribute” and click Add button.
      3. Enter Name of the attribute (e.g. Size).
      4. Enter values (value(s):) of the attribute separated by | (e.g., S | M | L | XL) . (as shown in fig 2.8)
      5. Check the “Used for variations” checkbox and click save attributes button to save the attribute.

        woocommerce variable product plugin
        Fig 2.8

To add global attributes:

      1. Go to : Dashboard > Products > Attributes. (as shown in Fig 2.1)

        woocommerce variable product demo
        Fig 2.1

      2. Add a new attribute by giving Name and slug for your attribute. (e.g. color). (as shown in Fig 2.2)


        Fig 2.2

      3. Click Add attribute, to save the attribute.
      4. Now to add attribute values, choose Configure terms of that attribute. (as shown in fig 2.3)


        woocommerce product variations plugin
        Fig 2.3

      5. Enter Name, slug, and Description of the color and click Add new Color button to save the attribute values, (e.g. black, blue, green). (as shown in fig 2.4 & 2.5)

        woocommerce variable product
        Fig 2.4


         product attributes
        Fig 2.5

      6. Go to: Dashboard > Products > Edit product > Product data > Variable products > Attributes .
      7. Select “Color” (your globally declared attribute from the dropdown list of attributes) and click Add button. (as shown in Fig 2.6)

        woocommerce variable produc
        Fig 2.6

      8. Now select the values from the dropdown of value(s): (e.g. black, green, blue). (as shown in Fig 2.7)

        add price to attribute
        Fig 2.7

      9. Check the “Used for variations” checkbox and click Save attributes button.

Step 3. Add variations

Last step is to add variations, let’s do it.

  1. Go to Variations section in the Product Data block in the single product page
  2.  Select Add variations from the dropdown and click GO Button. (as shown in Fig 3.1)

    Add Variable Products
    Fig 3.1

  3. Add Variations 4 times: the number of added variations should be equal to the number of attribute values (e.g. Sizes) you have. (e.g. I have 4 size S | M | L | XL) then I will Add variation 4 times. (as shown in Fig 3.2)

    Variable Products in Woocommerce
    Fig 3.2

  4. Select S (small )from the dropdown menu of the first variation, M (medium) for second and so on… (as shown in Fig 3.3)

    woocommerce product
    Fig 3.3

  5. In order to change additional data (e.g. set price), Select attribute value (e.g. S) and click the triangle icon on the right side to expand the variation block.
  6. Write the price for each size. (as shown in Fig 3.4)

    woocommerce add price attribute
    Fig 3.4

  7. Save Changes and Update page.

You have successfully added the variable product, with attributes and variations. Having issue? comment below or click here to contact us

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published.