Drupal Commerce – Product Attributes Configuration

This article is talking about Product Attributes in Drupal Commerce. For the Commerce module introduction, please check our other article about Drupal Commerce.

When creating an e-commerce platform for a given industry, one needs to adapt the system to specific types of products. Every product type has different characteristics, e.g. size, colour, etc. Check out how easily you can customise Drupal Commerce to sell any type of product.

We are happy to tell you how to easily add attributes to products for several selected industries. We are a Drupal agency and we deal with it every day.

Attributes are the characteristics of given product types. For example, when you sell your own original T-shirts, thanks to the attributes you do not have to add separate products when you want to add another shirt size or colour. You create one product, add a size and colour attribute, and create other versions of the same product.

Thanks to this, the customer can easily add to the basket the product variant they are interested in, without having to switch to another subpage with a different product.

Product attributes in Drupal Commerce

This post is a continuation of the series covering the Commerce module used to add an e-commerce platform to Drupal Previous part from the basic Commerce configuration.

You add new attributes to the product variation. The product variation is associated with a reference to the product. Thanks to this, you create one product, e.g. a T-shirt with the Droptica logo, and you add variations with different attributes to it. The attribute can be the T-shirt's colour or size. Every variation can also have a different price.

Start by creating a new type of product – T-shirt
From the admin menu Commerce → Configuration → Products → Product types

Add a new product.

→ enter label
→ check that the product should have many variations
→ Product variation type – by checking Create new, a new variation type will be created automatically with the same name as the product type, in this case – T-shirt. You can also choose an already existing variation type.

If you set Create new in the variation field, after saving the new product type, by going to 
Commerce → Configuration → Products → Product variation types you will see a new variation type.

Product attributes for a T-shirt/clothing store

Two typical attributes for this type of store are colour and size.

Colour.

The standard solution for colour choice is to create a linked colour, where – after clicking it – the appropriate variation of the product loads.

Drupal Commerce lets you achieve this effect very simply.

The list of attributes and the option of creating them is available in
Commerce → Product Attributes

Add a new attribute by clicking the Add product attribute button

add its name – Colour
element type – for now, set the Select list,
and the product variation, to which it is to be linked – T-shirt,

After saving, add colour values as you like.

Now create a new T-shirt product and add some variations to it to see how the attributes work. Set different prices for different variations – you will see then that after changing the attribute the price will change automatically.

The colour attribute can be found in the product variation creation form.

When you go to the main product page, the colour selection list will be visible. 

Change a selection list to links with colours

To achieve this effect, you need to add a new module – Colour Field

 

After enabling the module, add a new field to the colour attribute.

You can do it in the same way as you would for any other entity in Drupal.

 

Go to Commerce → Product Attributes 

And choose the Manage fields link

Add a new Colour field

Save the settings

The next step in the configuration is to change the display of the colour field in the tab for managing the appearance of the form, as well as the appearance of the field when the product is viewed.

Managing the form appearance

Set for both fields to be visible. This makes it possible to set the name of the colour and its HEX value when editing the attribute.

Managing the display.

In this case, you leave only the colour display and hide its name. In the format set – Colour switch. 

Thanks to this, coloured squares with colours to choose from will appear. By clicking the settings cogwheel sign you can change the size of these squares or replace them with ovals. 

The last step is to change the settings in the attribute itself.

 

Go to its edit options.

Change the Element type to Rendered attribute and add hex values for individual colours. 

After saving the settings on the page, the products – instead of an attributes/selection list – will be linked coloured squares.

 

Attributes for an electronics store

Laptops are one of the products found in electronics stores.

Typical attributes for this product type are:

• pre-installed operating system
• RAM amount
• SSD capacity

and some others, but for the purposes of this post, I will show you how to add these three.

Attributes are added in the same way as in the previous example concerning a T-shirt store.

The result of the configuration will be:

• operating system selection list
• clickable RAM amounts to choose from
• radio buttons with SSD capacity selection

I assume that the store has already added the product type and the product variation – Laptop

Configuration for the operating system attribute.

 

RAM attribute configuration

SSD capacity attribute configuration

Summary

As you can see, attributes can be added to the products in a Drupal Commerce-based store in a very quick and easy way. By implementing them, you will help the potential customers find the right product faster and give yourself a chance to increase the turnover.