Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Set up product attributes in Drupal easily & boost online sales

Parent Feed: 

The joy of e-commerce is that there are myriads of different products so every customer can find what suits them perfectly.

As an online store owner, you will just need to help them a little — which will be a win-win! In this post, you will learn how to do this by setting up product attributes in your Drupal online store. Flexible product management is one of the reasons to choose Drupal Commerce — an e-commerce platform for Drupal websites. Let’s take a closer look at its product attribute system.

A glimpse at how to increase online sales

In the ocean of recommendations to boost onlines sales on your e-commerce website, you will find everything from providing a smooth and simple checkout process to using cross-selling techniques or offering a choice of payment options. However, every recommendation is focused on usability and engagement.

That’s why one of the useful ways to increase sales is to provide your customers with a convenient choice between your product variations. Read on to find out how it works on Drupal Commerce websites.

What are product attributes?

Products in online store often come in more than one option. They may differ in size, color, fabric, shape, volume, or whatever other characteristics that customers might need to select when shopping.

Products that differ by color attribute

These characteristics are called product attributes. Their unique combination makes a product variation in Drupal (e.g. “I love Drudesk” T-shirt of size M and white color). The product is basically the same, but it differs in attributes.

The benefits of using product attributes

Here is what makes the use of product attributes so convenient — especially in the updated and improved system of Drupal Commerce 2.

  • You can easily add different product variations within the same product page by specifying their attribute values. No need to create separate products.
  • You can easily track items in stock and otherwise manage your products thanks to the fact that every combination of attributes (product variation) is assigned a separate SKU — a machine-readable ID.
  • Your online store customers can easily pick the right product variation according to their desired attributes and add it to the cart, with no need to go to another page with a different product.

Setting up product attributes in Drupal

If your e-commerce websits sells products that differ in some characteristics (or you plan to offer this), read on. Here is how the process of setting up the Drupal product attributes looks.

Adding a new product attribute

Find the Product Attributes link on your Drupal Commerce store dashboard. Then you click “Add product attribute,” and give it a name (e.g. “Dress color”).

Adding product attributes in Drupal Commerce

Adding attribute values

Your online store customers will need to choose between some color options (“White,” “Blue,” “Green,” etc.). As soon as you save the form, you will be able to add these as your attribute values. Add them one by one, clicking “Add value” every time. You can reorder them by dragging. If your store is a multilingual Drupal website, don’t forget to check “Enable attribute value translation.”

Adding attribute values in Drupal Commerce

Configuring how the attributes will look

On the same form, configure how it will look on the add-to-cart form (“Select list,” “Radio buttons,” or “Rendered attribute”). For the standard setup, the “Select list” or “Radio buttons” will be ok. Be sure to save the whole thing.

If you want to give your e-commerce website admins and customers a fuller view — for example, with the actual color swatch instead of color names — you should choose the “Rendered attribute” instead and install an additional contrib module such as the Color Field. It will allow you to set the color name and its HEX value when editing the attribute.

Drupal Color Field module

You can add fields to your attribute on the Product Attributes page by clicking “Manage fields” on the attribute editing menu. In this case, it will be the “Color” field.

Managing product attribute fields in Drupal Commerce

When the field is added, you can configure how it should look to your online store admins and your customers on the “Manage form display” and the “Manage display” tabs respectively. You can set the display as “Color swatch” and brush up the shape and size of the colors that will appear on your website.

Attaching the attribute to the product variation type

Attributes need to be added to a particular product variation type that requires them. Product variation types are another important Drupal Commerce concept. You can create or edit them on the Product Variation Type page and add your attributes to them. Or you can use the “Default” variation type. After that, you will be able to add product variations by specifying their color.

Adding product attributes to product variation types in Drupal Commerce

Let our team help you with the Drupal Commerce setup

The above is just the basic setup. We know from our experience that Drupal Commerce is a powerful platform with plenty of capabilities and plenty of possible settings for your online store. They are able to facilitate the e-commerce website management and boost online sales.

You can make your product selection work exactly as you need. For example, the image and price can update dynamically without a page reload every time a user clicks on a new attribute — using the decoupled Drupal Commerce approach or a decoupled shopping cart and benefiting from the capabilities of JavaScript frameworks to boost online sales.

Let our Drupal support and maintenance team guide you through the options and help you create the smooth setup depending on your requirements. What cannot be configured by built-in features, we will cover by the use of contributed modules or write custom ones specifically for you. Of course, we can also build an online store from scratch.

Use the best CMS features to boost online sales!

Author: 
Original Post: