If your products have options like size, color, format, or package size, then you need to create product attributes and their values. For example, suppose you are selling a t-shirt that comes in a variety of sizes and colors. Then you need to create a Size attribute (with values like, "Small", "Medium", and "Large"), and you need to create a Color attribute (with values like "Red", "Blue", "Orange", and "Green").
As the above image suggests, a product with a particular set of attributes will not necessarily have a variation for every possible combination. Perhaps the size Large t-shirt is only available in Green, and the Medium t-shirt is only available in Blue and Orange. Product attribute values do not define the complete set of product variations; rather they define a set of possible attribute combinations available to product variations.
Let's start by creating a Size attribute with values Small, Medium, and Large.
/admin/commerce/product-attributes
.On the Size product attribute configuration form, add "Small", "Medium", and "Large" as values.
You can use the drag-and-drop handle in the leftmost column, the Reset to alphabetical button, or the Show row weights link and Weight select lists to reorder the values. This order will be used on the form used to enter product variation data.
In the Simple product type documentation, we created a product type named, Simple. Use the same procedure to create a new product type named, Clothing, with a corresponding Clothing product variation type. Be sure to enable the Allow each product to have multiple variations setting, since this product type will have multiple variations. When you add the Images field to the product variation type, you can re-use the existing Image field instead of creating a new one:
If you look at the configuration form for any product variation type, you'll see that a new Attributes section has been added, with a checkbox for the new Size product attribute. Select this attribute for the Clothing product variation type: /admin/commerce/config/product-variation-types/clothing/edit
.
By default, all product attributes are required. However, after adding a product attribute to a product variation type, you can change its field settings so that it is not required. For example, to make the Size attribute optional for the Clothing product type, navigate to its Manage fields configuration page at /admin/commerce/config/product-variation-types/clothing/edit/fields
. Click the button for the Edit operation for the Size field.
On the Size settings for Clothing page, de-select the Required field checkbox and click the Save settings button to make the Size attribute optional for the Clothing product type.
For the Color attribute, we want to present the options as color swatches instead of just the color names. Most of the documentation for this functionality will be covered in the Add to cart form page of the Displaying products section. Here we'll just set up the Color product attribute.
To set up the Color product attribute like this, you will need to install the Color module. See the documentation on Extending Drupal Commerce for an overview of installing contributed Drupal modules.
The initial steps for creating the Color attribute are the same as the steps described above, for creating the Size attribute. Briefly, you need to:
/admin/commerce/product-attributes
.Now that we've created the Color attribute, we can add an additional field by navigating to the Manage fields configuration page for the Color attribute: /admin/commerce/product-attributes/manage/color/fields
.
On the Field settings configuration page, leave the default values are fine. On the Color settings for Color page, enable the Required field option and disable the Record opacity option. After saving the changes, you can return to Edit the page again, to set the default value for the color to "#000000".
After adding and configuring the Color field, return to the main configuration page for the Color attribute: /admin/commerce/product-attributes/manage/color
. Enter the following values for the Color for each attribute value:
Click the Save button to complete the configuration for the Color product attribute.
In the next section, we'll look at creating product categories.
Found errors? Think you can improve this documentation?
edit this page