Product type with attributes

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").

T-shirt color and size product attributes

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.

Create a basic product attribute

Let's start by creating a Size attribute with values Small, Medium, and Large.

  1. Navigate to the Product attributes page by using the menu item under the main Commerce menu or /admin/commerce/product-attributes.
  2. Enter "Size" for the Name.
  3. Select Select list for the Element type. See Product attributes in the Displaying products documentation for a description of how these options affect product displays.
  4. Do not select any Product variation types. This Size attribute will not be used for the Default or Simple product types. When we create a new Clothing product type (below), we can come back to update the configuration.
  5. Click the Save button to create the new product attribute.

Create Size product attribute

Create product attribute values

On the Size product attribute configuration form, add "Small", "Medium", and "Large" as values.

  1. Enter "Small" for the Name.
  2. Click the Add value button. A new text field will appear in the list.
  3. Enter "Medium".
  4. Repeat steps 2 and 3 to enter "Large" as the third value.
  5. Click the Save button.

Create product attribute 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.

Add a product attribute to a product variation type

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. 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:

Re-use existing Images field

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.

Enable Size attribute

Make a product attribute optional

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.

Edit size attribute 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.

Make size attribute field optional

Add a field to a product attribute

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.

Color attribute display

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:

  1. Navigate to the Product attributes page by using the menu item under the main Commerce menu or /admin/commerce/product-attributes.
  2. Enter "Color" for the Name.
  3. Select Rendered attribute for the Element type.
  4. Select the Clothing product variation type.
  5. Click the Save button to create the new product attribute.
  6. Enter "Black", "Blue", "Green", and "Pink" for the Color attribute values.
  7. Click the Save button.

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.

  1. Click the Add field button.
  2. Select Color from the list of field types.
  3. Enter "Color" for the Label.
  4. Click the Save and continue button.

Add color field

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".

Color field configuration

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:

  • Black: #000000
  • Blue: #9CC8D5
  • Green: #9ACA96
  • Pink: #E1A7CE

Click the Save button to complete the configuration for the Color product attribute.

Color field hex values


In the next section, we'll look at creating product categories.

Found errors? Think you can improve this documentation? edit this page