Skip to main content
  • X Twitter
  • youtube
Home
Drupal 4U
Built for AI. Powered by Drupal.
  • Home
  • Showcases
  • Services
  • Blog
  • Themes
  • About
  • Contact

Breadcrumb

  1. Home
  2. Tips and Tricks
  3. Use the module "Commerce Fancy Attributes" to add a color and/or size selector to the cart form

Use the module "Commerce Fancy Attributes" to add a color and/or size selector to the cart form

Tips and Tricks
May 20, 2015
Profile picture for user drupal
By drupal
  • facebook-f
  • twitter
  • envelope
  • print
52

This module provides a "Rendered term" attribute mode, that shows the rendered term instead of a radio button (degrades to a normal radio button when JS is off) on the add to cart form.

How to use the module to add a color selector:

  1. Install and enable this module.
  2. Create a Color taxonomy, add a text field called "Color" that will hold hex values.
  3. Go to the "Manage Display" screen of that vocabulary, click the tab called "Add to Cart form - Attribute", enable only the color field (with the label hidden, and using the "Color" formatter).
  4. Create several terms with matching hex colors (Black: #000000, White: #ffffff, etc).
  5. Add a Color taxonomy_term_reference field to a product type (product type, not node type!). Doing so add the color field on the product type, tick the checkbox "Enable this field to function as an attribute field on Add to Cart forms." and select "rendered term" as option of the "Attribute selection widget".
Use the module "Commerce Fancy Attributes" to add a color and/or size selector to the cart form
Modules

Read more articles

Newer
The best Drupal modules for the integration of Instagram
Older
Drupal Commerce: How to collect additional case specific (rules) information during checkout
  • Log in to post comments
Profile picture for user drupal
drupal
52
1
min read
A- A+
  • facebook-f
  • twitter
  • envelope
  • print

Contact Us

Get in touch for questions and our Drupal development, design and optimization services.

Contact Us

We aim to reply the latest within 48h.

Drupal 4U: Built for AI. Powered by Drupal.

We are a group of Drupal designers, developers and webmasters. We are Drupal experts! We provide comprehensive services that go beyond traditional web development, focusing on how AI understands, interprets, and cites your content. With our deep expertise in Drupal's architecture, we build the intelligent core of your digital presence, ensuring your brand remains authoritative and visible in a world where AI is the primary gatekeeper of information. Partner with us and let's future-proof your digital strategy together.

  • X Twitter
  • youtube

Drupal Services

  • Drupal Web Design
  • Drupal Development
  • Drupal SEO
  • Drupal GEO
  • Drupal Migration

Drupal 4U

  • Services
  • Showcases
  • Themes
  • Blog
  • About

Drupal Links

  • Official Drupal Website
  • Theme Forest
  • Gaivas Themes
  • More Than Themes
  • DXPR: Drupal for Marketers
  • Drupal Answers
2012 - 2025, Drupal 4U

Footer menu

  • Contact
Home
Drupal 4U
Built for AI. Powered by Drupal.
  • Home
  • Showcases
  • Services
  • Blog
  • Themes
  • About
  • Contact
Clear keys input element