Magento 2 Tips & Tricks: How to Display the Correct Product Image in the Checkout Cart in Magento 2

If you create an item with different attributes in Magento 2, for example color and size, and then add custom images for each color to the item record, Magento 2 will enable you to display those custom images on the product details page. So that if a visitor selects a different color for the item, it will display the product in that particular color.

But when someone adds this product combination to the checkout cart in your Magento 2 web store, the item image shown in the cart is always the base image for that product, not the base image for the product and attribute combination the customer has selected.

For example, you create an item that’s a shirt and you list 5 colors that its available in, with each color having its own item image. The base image for the item shows the shirt in white color. Say a visitor clicks on that image and then on the product details page, selects the shirt in red color. When he/she does that, Magento 2 will display the item image showing the red shirt.

But when the visitor clicks Add to Cart on the product details page and then views his shopping cart, the picture shown displays the shirt in the default white color, which is the base product image. Yet the color of the shirt in the shopping cart is listed as “Color: Red“. That’s where the problem lies, because ideally, the cart should display the image of the individual item selected (i.e. the red colored shirt and its SKU) instead of the base product image.

Fortunately, Magento 2 offers an option via which you can select which image you would like displayed in the Shopping Cart. You can access this setting by navigating to Configuration > Checkout > Shopping Cart > Configurable Product Image (as shown in the screenshot below)

Here, under the Checkout Tab (in the left hand navigation) you can select the custom product image you want displayed in the shopping cart, by selecting the correct option from the ‘Configurable Product Image’ option.
Hope you found this post useful.

If you have a Magento design, development or Magento customization requirement you would like to discuss (for Magento 1 or Magento 2) please get in touch with us. To learn more about our Magento development services please visit https://folio3.com/magento-development

Blog Post