Drupal Commerce - Product Attributes

By shane
Thu, 2013-05-16 22:07
Daily Dose of Drupal Episode #140

Share with Others

In this episode we continue learning about Drupal Commerce and begin learning how to set up Drupal Commerce Product Attributes using Drupal Taxonomy.

In this episode you will learn:

  • How to set up Drupal taxonomy vocabularies and taxonomy terms to use as product attributes.
  • How to add Taxonomy term reference fields to Product types to create Drupal Commerce product attributes.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 140 and we’re going to continue learning about Drupal Commerce and in this episode we’re going to be learning about Product Attributes. As always; I’m Shane Thomas, you can follow me on Twitter at smthomas3, you can find me on Google + and you can check out codekarate.com sign up for the newsletter and learn how you can become a Code Karate supporter.

Let’s go ahead and get started; if you remember from the Drupal Commerce basics episode … a few episodes back I mentioned that Product Attributes are all controlled through taxonomy and the Product Attributes are basically going to allow us to have one product display called “Hat” and allow us to select the different hat colors whether it’s yellow, pink, red, white or any other type of hat color that we need to add.

So we’re going to start by coming into Structure in taxonomy and we need to really think out all the different product attributes that we’re going to be using on our Drupal Commerce website.

The first one we’re going to add is Colors so I’m going to add colors and after I add colors I’m going to add various terms to these colors. So I’m going to start with yellow since that’s the hat that’s over here on the background, I can give it a description and a URL alias if I want, do pink, red, white, blue and we’ll go green as well.

Now that we have the colors taxonomy and those terms listed we’re also going to create a taxonomy vocabulary for Hat Size. We won’t necessarily have to do this because in this case I’m going to just use a one size fits all for the hat but in case if we ever need to add different hat sizes down the road we’d have the vocabulary already set up so we could go ahead and add this as a product attribute. So I can go ahead and come into the add term for hat size and I’m just going to do one size because this is going to be a one size fits all.

So now I have hat size, colors, we’re going to need shirt size so I’m going to go ahead and add Shirt Size and I’m going to add terms to that and we’ll go ahead and do small, just keep it S for small, M for medium, L for large and then XL. Okay so now we can take a look at our different vocabularies, we have colors, hat size and shirt size. Now the next part is to actually allow on the product type form to select the color or size attribute when you’re adding the products or editing the products on the site so we come into our product types and we have hats and shirt that we’ve created earlier.
I’m going to go ahead and go to manage fields on Hats and we’re going to need the term Reference Field so we can actually reference these taxonomy terms that we created. I’ll use Select Boxes or Select Lists in our example so I’m going to create one called “Color”. It’s going to reference the colors vocabulary; we’re going to make this field required so every hat has to have a color and this is an important section right here you’re going to make sure you’re going to want to read.

Basically it says if single value fields attached to products can function as attribute selection fields on add to cart forms. Basically this means if we check this box this color will become a select list when you’re adding the product to your cart so when you go to the Product Display we’re going to be able to see a dropdown or radio buttons depending on what we select that are going to allow us to select which color we want so in this case; which color hat. Make sure to keep this number values one if we check this box here and we’re going to click Save. We’re also going to need the term Reference Field for Hat size and we’re going to keep this one a select list as well, we’re going to reference the Hat size vocabulary, we’re going to make it required check the attribute field settings checkbox to make it a select list on the Add to Cart form, I’m going to click Save.

Now we have our two term reference fields added to our hats we’re going to do the same thing for shirts and click on Manage Fields. In this case we’re going to select Add an Existing Field because we already created this field color term reference fields so we’re just going to use that same field rather than creating a new one, we’ll make it required and check this box again and click Save. We’re going to need to add a new field now for shirt size.

This is going to be another term reference field that’s going to reference the shirt size vocabulary, I’m going to make it required, check the box, scroll down and click save. Now the next step is we already have 4 different products in here. We’re going to come in and give it a color and a hat size for each of these 4 products that we already created. So in this case we’re going to edit the white hat, select White as the color.

The hat size of course is just a one size fits all, I’m going to do the same for the pink, we’re going to select Pink as the color, hat size is the one size fits all, do the same for yellow and last but not least do the same for the red hat. Now we’re going to actually add a few shirt products and each one of these things in this list you can think of specific product variation or one unique product so this White Hat in one size fits all has a specific skew.

We’re going to do the same now for shirts; we’re going to call it Shirt 01 as the skew. The title is going to be Small White Shirt, use just S for Small, you could spell it out if you wanted and we’ll make this 15 US dollars, we’re going to find the image for the white shirt. The color in this case is white and the shirt size we said was small. You’ll notice that these … the listing here goes large, medium, small, XL which isn’t quite very intuitive so we’re going to change that here in a second so we can go Save Product.

Now we have our small white shirt I’m going to change that order just to show you how that can be done so I come into our shirt size taxonomy and I can reorder this so I can go small, medium, large, XL just to keep it a little bit more intuitive when you’re adding products and now we come back into our products page. So we’ve added one variation for the small white shirt, we need to add one for a medium white shirt, a large white shirt, an XL white shirt, double XL if we had it. Any distinct type of product that you are going to have to ship or sell that has a specific skew as t have a variation added to this list so it is a little tedious when you have to add on specific shirt multiple times because this is one white shirt but you have to or one shirt, excuse me, it could be white, green, blue and it could be small, medium, large, XL so you can see the number of variations on this list, could grow very quickly but the important thing to keep in mind is it’s actually very intuitive how that works because you have a specific product for each of those variations that you need to ship out and each one is going to have a specific skew.

So I’m only going to do a couple here so I don’t spend too much time entering in just a bunch of variations so we’re going to do medium white shirt, say this is $15 and we’ll say for whatever reason the white shirt only comes in small and medium so we’ll just keep … let’s add the two variations for the white shirt with the small and the medium, we’re going to add another and we’re going to call this a large green shirt, it’s the wrong field, call this Shirt 03, we’ll make the green shirt $16 and select Green and large and we’ll also have an XL green shirt, that’s $16 and then we’ll also just have a medium blue shirt, that would be $17.

Keep in mind that in most cases I’m going to have a small, medium, large, XL, double Xl of all these different shirts so we’ll have to add a variation for each of these but to save time I’m just doing a few options just to show you how it would work. Now you can see our list has grown we have Hats and Shirts and now we’re going to come back and create product display as one for all of these hats and one for all of these shirts and show you how that is now going to look.

So I already have a bunch of product displays one for each of these hats, we’re going to ignore these and I’ll eventually delete them but we’ll keep them there just for reference but I’m going to add a product display called Hat and I’m going to select the various hats that they can reference. In this case I’m going to select all of these Hats by simply holding that CTRL button on the keyboard and selecting multiple, I could give it a description, click Save and now you’ll see the product page has some select boxes or dropdowns on it for color and hat size.

You’ll see that it defaults to this white hat but if I wanted to look at the red hat for instance I select red and the product image immediately changes, select white, select yellow or select pink and you’ll notice that it changes, you’ll also notice that the price changes so it’s $21 for the red, $20 for the pink, the white is 20 and the yellow is 19.
There’s only the one size fits all so the hat says one size and you can of course add different quantity. Now the interesting thing here is if I select red and I select one size and I add it to the cart it says the red hat has been added to the cart. I’m going to remove this old yellow hat from our previous example so now you can see it has the red hat which is $21, if I come back here and I selected yellow it says that the yellow hat has been added to the cart.

So as you can see that works out pretty well, we’re also going to create a product display for shirt and I could give it a body or a description and I select all of these different shirt options and I click Save.

Now you can see we have shirt here, this one is a white shirt, you can see I only have two sizes in white, small and medium however if I select blue the blue shirt shows up and now my shirt size is only medium but we’d select green, shirt size can be large or extra-large and this all based on which product variations you have created in the product section in the back end of your Drupal Commerce website so if I wanted to add a medium green shirt and I would have to go in add it as a product type or as a specific product variation so I’ll go into products create product, create a shirt and I believe I was going to add a medium … medium green shirt, I believed we give that $16 price, select the green shirt image again.

Keep in mind that you could have a different image for each size and each color so if we wanted the medium green shirt to show differently than the small green shirt we could do that, in this case I’m going to use the same image because in a lot of cases that may be what you want to do but of course you could do whatever you want for you different images and when you select the different color and the different size a different image could be loaded in here. So select green and medium, save product and now when I come back here you’ll notice that it’s not quite set up yet. I still don’t have the medium shirt showing. I actually have to edit the product display and make sure I have the medium green shirt selected as a referencible product as well.
Now when I come back here you can see the medium shows up and the green shirt is available to be added to your cart. Once I add it to the cart it says the medium green shirt has been added because that’s the specific variation of the product that I was adding to the cart.

So that’s really all there is to Product Attributes, there’s a lot of things you can do here and really the options for a different number of attributes could vary depending on what type your selling on your site and obviously some products will have multiple attributes, some may not have any, it just really depends on the products and how you layout and structure your product types and your product displays.

So that’s it for this time on the Daily Dose of Drupal, thanks for watching and we’ll see you next time with another Drupal Commerce episode. See you!