{"id":458,"date":"2019-06-11T11:57:15","date_gmt":"2019-06-11T11:57:15","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/06\/11\/add-additional-options-in-magento-2\/"},"modified":"2025-05-22T16:35:25","modified_gmt":"2025-05-22T11:05:25","slug":"add-additional-options-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-additional-options-in-magento-2\/","title":{"rendered":"How to Add Additional Options in Magento 2"},"content":{"rendered":"\n

Magento 2 is a feature-rich platform that helps improve the shopping experience. However, many times it lacks in fulfilling the business requirements now that various types of business have its online presence. Luckily, the developers can offer customization to implement out of box functionalities.<\/p>\n\n\n\n

As a part of such customization, you may want to add additional options in Magento 2<\/strong><\/em> product page, cart page, etc. For example, you want to display a text box to allow customers to add comment box in the product page or to show installments selected by the customers on the cart page.<\/p>\n\n\n\n

Also, it is important that you implement the customizations without affecting the core functionalities as it is not a good practice. The below method allows to add additional options in Magento 2<\/strong><\/em> considering it.<\/p>\n\n\n\n

Steps to Add Additional Options in Magento 2:<\/h2>\n\n\n\n

1. Create events.xml<\/strong> at app\\code\\Vendor\\Extension\\etc\\<\/strong><\/em><\/strong><\/em><\/p>\n\n\n\n

<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Event\/etc\/events.xsd\">\n    <event name=\"checkout_cart_product_add_after\">\n        <observer name=\"extension_checkout_cart_product_add_after\" instance=\"Vendor\\Extension\\Observer\\CheckoutCartAddObserver\" \/>\n    <\/event>\n     <event name=\"sales_model_service_quote_submit_before\">\n        <observer name=\"extesnionadd\" instance=\"Vendor\\Extension\\Observer\\AddOptionToOrderObserver\" \/>\n    <\/event>\n<\/config><\/pre>\n\n\n\n
2. Create CheckoutCartAddObserver.php<\/strong>  at app\\code\\Vendor\\Extension\\Observer\\<\/strong><\/em><\/strong><\/em><\/p>\n\n\n\n
namespace Vendor\\Extension\\Observer;\n\nuse Magento\\Framework\\Event\\Observer as EventObserver;\nuse Magento\\Framework\\Event\\ObserverInterface;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Framework\\View\\LayoutInterface;\nuse Magento\\Framework\\App\\RequestInterface;\nuse Magento\\Framework\\Serialize\\SerializerInterface;\n\nclass CheckoutCartAddObserver implements ObserverInterface\n{\n    protected $layout;\n    protected $storeManager;\n    protected $request;\n    private $serializer;\n\n    public function __construct(\n        StoreManagerInterface $storeManager,\n        LayoutInterface $layout,\n        RequestInterface $request,\n        SerializerInterface $serializer\n    )\n    {\n        $this->layout = $layout;\n        $this->storeManager = $storeManager;\n        $this->request = $request;\n        $this->serializer = $serializer;\n    }\n\n    public function execute(EventObserver $observer)\n    {\n\n        $item = $observer->getQuoteItem();\n        $post = $this->request->getPost();\n\n\n        $additionalOptions = array();\n        if ($additionalOption = $item->getOptionByCode('additional_options')) {\n            $additionalOptions = $this->serializer->unserialize($additionalOption->getValue());\n        }\n\n        $additionalOptions[] = [\n            'label' => 'Size',\n            'value' => 'XL'\n        ];\n\n        if (count($additionalOptions) > 0) {\n            $item->addOption(array(\n                'product_id' => $item->getProductId(),\n                'code' => 'additional_options',\n                'value' => $this->serializer->serialize($additionalOptions)\n            ));\n        }\n\n    }\n}<\/pre>\n\n\n\n
3. Create AddOptionToOrderObserver.php<\/strong>  at app\\code\\Vendor\\Extension\\Observer\\<\/strong><\/em><\/strong><\/em><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Extension\\Observer;\n\nuse Magento\\Framework\\Event\\ObserverInterface;\nuse Magento\\Framework\\Serialize\\SerializerInterface;\n\nclass AddOptionToOrderObserver implements ObserverInterface\n{\n    private $serializer;\n\n    public function __construct(\n        SerializerInterface $serializer\n    )\n    {\n        $this->serializer = $serializer;\n    }\n\n    public function execute(\\Magento\\Framework\\Event\\Observer $observer)\n    {\n            $quote = $observer->getQuote();\n            $order = $observer->getOrder();\n            foreach ($quote->getAllVisibleItems() as $quoteItem) {\n                $quoteItems[$quoteItem->getId()] = $quoteItem;\n            }\n\n            foreach ($order->getAllVisibleItems() as $orderItem) {\n                $quoteItemId = $orderItem->getQuoteItemId();\n                $quoteItem = $quoteItems[$quoteItemId];\n                $additionalOptions = $quoteItem->getOptionByCode('additional_options');\n                if (count($additionalOptions) > 0) {\n                    $options = $orderItem->getProductOptions();\n                    $options['additional_options'] = $this->serializer->unserialize($additionalOptions->getValue());\n                    $orderItem->setProductOptions($options);\n                }\n\n            return $this;\n        }\n    }\n}<\/pre>\n\n\n\n
That\u2019s it. Adding options in Magento 2 was never this easy, isn\u2019t it? Likewise you can also improve the user experience by adding sticky add to cart button<\/a> in your Magento store.<\/p>\n\n\n\n
The below image shows how I implemented this method to show the number of installments:<\/p>\n\n\n\n
\"Example<\/figure>\n\n\n\n
For a similar solution in Magento, check add additonal options in Magento<\/a>.<\/p>\n\n\n\n
Thank You.<\/p>\n","protected":false},"excerpt":{"rendered":"
Magento 2 is a feature-rich platform that helps improve the shopping experience. However, many times it lacks in fulfilling the business requirements now that various…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-458","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=458"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/458\/revisions"}],"predecessor-version":[{"id":15386,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/458\/revisions\/15386"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}