Commerce Module Tuesday: Commerce Customizable Products (Screencast)

Commerce Customizable Products is another module that provides custom line item types like Commerce Custom Line Items, which I've shown before.

Our goal here is to sell a T-shirt with a customizable slogan on it. This could be any customization, and there could be more than one field. Here's how we do it:

  1. Enable Commerce Customizable Products.
  2. Create a custom line item type which will have the extra field. (We wouldn't have to do this if all products in our store had this customization.)
  3. Add the field to the new line item type. In this case it's a text field called "slogan".
  4. Create a special product display content type (with a product reference field) so that we can configure the display settings on the product reference field.
  5. Configure the display settings to use our custom line item type (and tell it not to try to combine like items in the cart).
  6. Create product and product display node to try it out.

For extra credit in the video we add the new field to the cart view, and even give the customer the option to edit it in the cart view by using the excellent Editable Fields module.

Here's the screencast:

Posted February 7, 2012

Comments

Submitted by Hennie (not verified) on

Hi Randy, thanks for great tut. Is there a way I can make the text-area bigger en self-enlarging? My users must enter a lot of different info and the text area wants you to enter everything on one line.

Submitted by josh on

Hennie - Great question! At 3:19 in the video randy is adding a field to his line item type. It's important to note that you are not required to add simply a text field. You can add any kind of field that you can install. For example, you could add an address field, a phone number field, or, for your case, a textarea field instead of a text field.

Let us know if that helps!

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.