Back to Top

How To Set Additional Options In Cart Item – Magento2

Updated 7 May 2024

In this blog we will see how to add additional options in cart item.
In some situations we want to display specific details with some products in cart.

We can either create a custom option on product or we can override template file and display desired information.
But there are some issues in both situations.

Custom option on product

If you want to display additional information using custom option then you have to create custom option on product and custom option will be visible everywhere on product.

So you have to hide options from product and it will be additional work to do.

Override template

If you want to display information by overriding template then you have to override so many template files for this.
Some of the templates files are

Searching for an experienced
Magento 2 Company ?
Find out More
  • Cart page template files
  • Checkout page template files
  • Minicart template files

But luckily there is another way in magento by which you can achieve this without overriding templates and creating custom option.
You can achieve this using observer.

Additional options using Observer

First of all define event in events.xml file.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_product_load_after">
        <observer name="set_additional_options" instance="Webkul\Demo\Observer\SetAdditionalOptions"/>
    </event>
</config>

After this write following code in your observer file.

<?php
namespace Webkul\CartItem\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\App\ObjectManager;
use Magento\Framework\Serialize\Serializer\Json;

class SetAdditionalOptions implements ObserverInterface
{
    protected $_request;    
    public function __construct(
        RequestInterface $request, 
        Json $serializer = null
        ) 
    {
        $this->_request = $request;
        $this->serializer = $serializer ?: \Magento\Framework\App\ObjectManager::getInstance()
            ->get(\Magento\Framework\Serialize\Serializer\Json::class);
    }

    /**
     * @param \Magento\Framework\Event\Observer $observer
     */
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        // Check and set information according to your need
        $product = $observer->getProduct();                    
        if ($this->_request->getFullActionName() == 'checkout_cart_add') { //checking when product is adding to cart
            $product = $observer->getProduct();
            $additionalOptions = [];
            $additionalOptions[] = array(
                'label' => "Some Label", //Custom option label
                'value' => "Your Information", //Custom option value
            );                        
            $product->addCustomOption('additional_options', $this->serializer->serialize($additionalOptions));
        }
    }

}

You can set the multiple options using the same approach.
Using this approach you can set additional options in cart item and you will be able to view this information on all pages.

  • Cart Page
    Additional Options
  • Mini Cart
    Additional Options
  • Checkout Page
    Additional Options

If you want to display this additional options in order item.
Check the blog –
How To Set Additional Options In Order Item – Magento2

If you have any query or issue, comment below.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


8 comments

  • salik shastikar
  • vipul
    • Webkul Support
  • Patryk
  • subhranil92
  • san
  • Trilok
  • Neeraj
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home