The Add to cart form allows customers to select a specific variation of a product and add that item to their Cart. In this section, we describe:
In the previous section, we looked at how to customize product pages using the Manage display configuration form for product types. To include the Add to cart form on your product display, make sure the Variations field is enabled and set its Formatter to Add to cart form. This formatter has a single configuration option: Combine order items containing the same product variation.
The Add to cart form is implemented as a variant of the Order item content entity form.
If you do not know which Order item type is used for your Product type, you can identify it by following these steps:
- Navigate to the Product types listing at
/admin/commerce/config/product-types
- Click the product variation type link for your product type.
- On the product variation type Edit form, identify the Order item type.
Once you've identified the correct Order item type for your Product type, navigate to the Manage form display configuration form for that type and then select the Add to cart form display option.
By default, Purchased entity is the only field enabled for the form. That field provides a mechanism for customers to select a product variation to be add to their cart.
If you would like to allow customers to enter additional information when adding items to the cart, enable the relevant fields here. For example, if the Quantity field is Disabled, then whenever a customer clicks the Add to cart button, 1 unit of the selected item will be automatically added. To allow customers to specify quantities other than 1 when they select an item:
The Quantity field now appears on the Add to cart form for this product type.
If you have products with customization options, you can add fields to the Order item type, using the Manage fields form. Then add those fields to the Add to cart form for the Order item type. For example, a Monogram textfield has been added to the Add to cart form for this Order item type:
There are two widget options for the Purchased entity field:
Product variation attributes is the default widget, and it's the one that's been used for all the example images on this page. It renders the Add to cart form with an element for each attribute individually. (For example, Color and Size.) The details of how this works and configuration options will be covered in the next section.
Product variation title is a simpler widget option. It displays all available product variation options in a select element. The only configuration option is the label for the select element. The default label is Please select and can be hidden. Here is how the same Add to cart form pictured above looks when the widget is changed to Product variation title. (The Add to cart button is beneath the select element.)
Both widgets allow custom modules to apply their own filtering to the list of available product variations by subscribing to the ProductEvents::FILTER_VARIATIONS
event. For more information on writing event subscribers in Drupal 8, Drupal 8 Event Subscribers - the successor to alter hooks and Drupal 8: Hooks, Events, and Event Subscribers are good introductory articles. The Code Recipes section of the Products documentation also contains an example.
You can add the Add to cart form to a custom content type by adding an Entity reference field that references entity type Product and then configuring the display using any of the techniques described in Product display pages and on this Add to cart documentation page. Here is an example for adding the Add to cart form to the Article content type.
Navigate to the Manage fields form for the Article content type and click the Add field button: /admin/structure/types/manage/article/fields
If you have multiple product types, specify the product type(s) to reference on the next page.
Navigate to the Manage display form for the Article content type and select Rendered entity for the Product field formatter: /admin/structure/types/manage/article/display
. (You may also want to hide the field's label.)
In the next section, we'll look at configuration options for displaying a product's attributes, such as Color and Size.
Found errors? Think you can improve this documentation?
edit this page