4.4 Add Product Attributes and Options

As we noted in the last section, product attributes are useful to help customers choose a size or a color of a product. But they are also used to automatically adjust your product inventory. It can take some time to create a combination of size and color options for a given product. Thankfully, once an Attribute combination is created, you can simply copy this combination of attributes to another product. Go to Components - Phoca Cart - Products. Select products to which you want to copy the attributes and click on Copy Attributes button.

01

How to Set Up a Required Attribute
We typically want to require the choice of an attribute, even if there is no extra charge for the attribute, not only because we want to ship our customer the size and color they want, but also because we are using this function to automatically adjust our inventory. This may or may not involve setting one of the attribute options at the default value.

The Problem that occurs if you do not use required attributes

Go to the front end of your Demo website with the Sample data loaded. Then click on the Audi A8 Product page.

02

Note that there is a color selector to choose between the white color or the blue color. Either color is set up to add one thousand Euros to the price of the car. But because the color attribute is not required, a customer could simply click on the Add to Cart button. Here is the cart that results:

03

Note that there is no color chosen. To understand how this problem occurred and how to fix it, go to the Products section in the back end and click on the Audi A8. Then click on Attributes.

04

 

There are several problems with the way this attribute was set up. The first is that the Attribute was not set for Required. The second problem is that neither color option was set to be the default option. The third problem was that the actual color was not set for either of the two color options.

Now close this product and open the Audi A5. Then click on the Attributes tab. This model has the same color attribute problems as the Audi A8. But we will make the following changes to the Audi A5 so you can compare how it works when the Attributes are correctly set.

First, change Required from No to Yes. Then change the type from Color to Color Select.

05

First Option

Title White

Alias White

Stock 0 (means that the stock value has not yet been set)

Operator Price Plus sign

Amount (to add this color option) 1000

Color: Set to #CCCCCC (white or #FFFFFF did not display well since the page has a white background and the check box is also white).

Default NO

Second Option

Title Blue

Alias Blue

Operator Price Plus sign

Amount 2000

Color #0066cc (blue)

Default Yes.

06

Then click SAVE.

The 4 keys are to make sure Required is set to Yes and the Type is set to Color Select (instead of Color Checkbox) and that one of the options is set to Default and that all options have a color selected.

Then check the Audi A5 Product View in the front end. You will see a checkmark on the blue box.

07

Blue is checked. If you click Add to Cart, you will get the blue car. If you want the white car, you will need to check on the White Box.

08

Adding Size Attributes
We will pretend that the Audi A5 comes in three different sizes, Small, Medium and Large. To add the Size Attribute below the Color attribute, click on the Plus sign to the right of the word Attributes. Then scroll down the page to the new blank attribute box:

09

Give it a Title like Select a Size. Then make it required. Then for type, click on Select:

10

Then click on the Options plus sign to add a new option. For Title, type in Small. Then leave the rest blank and click Options Plus to add another option. Type in Medium and click on Default to make Medium the default value. Then leave the rest blank and click Options Plus to add another option. Then type in Large. Then leave the rest blank and click Save and Close. Then visit the product page in the front end.

11

Click on the size and color options to make sure that the product attributes were both added to the cart correctly.

12

What’s Next?

Now that we understand how to correctly add sizes and colors to our products, in the next chapter, we will review how to add and structure several different kinds of shop menus and menu items.