Add content type for product display
The node will associate all variations of a product to display them on a single node. When the user picks a variant from the pull-down list, the associated data is updated on the page using Ajax.
We need to add a content type for displaying our new products in a specific content type. Navigate to the "Content Type" section (Structure > Content Types > "Add content type", or
http://example.com/admin/structure/types/add) and enter the details of your product type. In our example, we name this new content type "Product display". Then click "Save and add fields".
You should be on the Manage Fields tab of your content type (Structure > Content Types > [Your Content Type] > Manage Fields Tab, or
In order to reference one or more products (product variations) with this content display, we need to add a "Product Reference" (
field_product) field to this content type. Be sure to set the field type to "Product reference" and the corresponding widget to "Select list" or "Autocomplete text field.". If you choose "Select list", you will get a rolling list of your products for all products you will want to display. This is easier if you have few products to display with this content type. You can label this new field "Product reference". Don't add again the fields defined in the product type. Click on "Save".
Note: You may want to select "unlimited" references in order to associate several variations of the product to one single display (e.g., several sizes and/or several colors). The field should also be set to required.
By clicking the Manage Display tab (Structure > Content Types > [Your Content Type] > Manage Display Tab, or
http://example.com/admin/structure/types/manage/[YourContentType]/display), we can change the way the fields for our content type will be displayed. Change the display format for the "Product Reference" field to "Add to Cart form."