Commerce 2 Add to cart with quantity field and Product Picture

Question

I have added an image field in product variation type. Add few products to my store. Now when I am going to product detail page to add the product in cart it just shows the add to cart button without any quantity field. Also not showing Image of the product.

I tried to change the formatter to Rendered Entity, but it then only showing the picture and price but not the add to cart button. Rendered Entity was using default view mode. So I created additional view mode through manage display of product variation type but that also didn't provide any option to show the add to cart button.

What I want is to display the product variation picture + Price + SKU + Add to Cart button with quantity field.

Please guide me how to achieve this.

Answer 1

Please check your order item type e.g. admin/commerce/config/order-item-types/default/edit/form-display/variation_cart_form (default type)

Needed view mode is variation cart form. There is quantity field.

Also check this default view mode for your product variation type /admin/commerce/config/product-variation-types/default/edit/display

There is add to cart button.

Answer 2

The price is shown by the purchasable_entity field. When you create your order item type you may (is not required) select the purchasable entity type you want your order item referred to. Typically this would be a product variation type in many cases the machine name for your product variation type matches your order item type machine name, for example if your your order item type can be cars_parts then you may have cars_parts product type and cars_parts_variation product variation type.

Although this setting can only be set during the order item type creation so cannot be edited afterwards, but you can edit the configuration directly in the database (not recommended) or using Drush (recommended):

# Drush 8
drush config-edit commerce_order.commerce_order_item_type.your_order_item
# Drush 9
drush config:edit commerce_order.commerce_order_item_type.your_order_item

The prior command will open your terminal fav text editor just change the line which prints purchasableEntityType: null to your product variation type. If that is set correctly you should check the default view display for your product variation type in /admin/commerce/config/product-variation-types/YOUR_TYPE/edit/display

To output this field in your Add to cart form mode just go to /admin/commerce/config/order-item-types/YOUR_TYPE/edit/form-display/add_to_cart and drop it in place.