How to Add Additional Options in Magento 2 Cart

by Fayyaz Khattak  October 3, 2016

Magento 2 has several well-known features that add great value to an online store. However, many store owners and administrators are always looking for new features that would distinguish their stores from the competition.

Recently, I was looking for a way to add custom input option to Magento 2 cart without affecting the core Magento functionalities (a good practice endorsed by Magento gurus including Ben Marks!)

Magento 2 Cart Options

I did a lot of Google searches and read a number of Stack Overflow threads (even started a thread myself). Finally, here is my solution of the big question of adding additional options in Magento 2 cart.

To add additional options in the frontend of the Magento 2 cart and to carry those values through ordering, invoices, and reordering process, you need two observer events.

First of all, let me briefly explain Observers in Magento.

Observers are special Magento classes that are executed whenever the event manager detects the event observers are configured to watch. The observer classes hold the instance of that event which is used for further pre-defined actions.

For the purpose of this article, assume that your Magento 2 store is installed directly in the public_html folder of the Magento hosting directory. This means that the store is accessible directly from the parent domain (yourdomain.com). Also, assume that the default Magento 2 theme is active and in use.

Following is the process of implementing the custom values in the Magento 2 cart.

Create a Simple Magento 2 Module

The best practice and the recommended code standard for Magento 2 is to create a module.

Here, I will use Cloudways as Module Namespace and Mymodule as Module Name.

First, create a registration.php file in /app/code/Cloudways/Mymodule/. Add the following code to the file.

Now, create a module.xml file in /app/code/Cloudways/Mymodule/etc/ with the following content.

Assign Observers to Events

Now, I will configure the observers in the events.xml file to watch certain events.

I will assign the observer CheckoutCartProductAddAfterObserver to the event checkout_cart_product_add_after and SalesModelServiceQuoteSubmitBeforeObserver to sales_model_service_quote_submit_before.

The file should be located at /app/code/Cloudways/Mymodule/etc/ with the following code.

Create the Observers

I will require two observers for the job. Keep in mind that in order to create an observer, you must create an observer class file under the Observer directory of the module. The class should implement Magento\Framework\Event\ObserverInterface and define the observer execute the function.

To add custom option to quote, create CheckoutCartProductAddAfterObserver.php file in /app/code/Cloudways/Mymodule/Observer/ and add the following code in it.

I will now create another observer that will copy option from quote_item to order_item.

Create another file SalesModelServiceQuoteSubmitBeforeObserver.php in /app/code/Cloudways/Mymodule/Observer/ with the following code:

Add Input Field to Magento 2 Cart

Last but not the least, I will add a custom input field to Magento 2 Cart template. For this, it is important to know the location from where Magento 2 is rendering the default cart on the product page. This is the location of the template:

Magento/Catalog/view/frontend/templates/catalog/product/view/addtocart.phtml

Copy the addtocart.phtml file to the module directory at /app/code/Cloudways/Mymodule/view/frontend/templates/catalog/product/view/ and paste the following code in it:

And that’s all.

Now, the last thing to do is to change the default addtocart.phtml template to a custom template. At this point, Magento 2 does not know that I want to use my own addtocart.phtml file. To remedy this, I will modify the path using the Magento 2 layout.

Create a new file catalog_product_view.xml in /app/code/Cloudways/Mymodule/view/frontend/layout/ and add the following code:

Finally, the custom module that will add additional options to Magento 2 Cart and forward the custom information items across orders, invoices, and reorder processes is ready.

Now, I will enable and activate the module through the following CLI command.

The final output will look like this:

Magento 2 Cart Output

Conclusion

I hope that by now you have a clear idea about the concept of Observers in Magento 2. I created a custom module that added a further option to the cart. If you have any questions about the process or would like to add to the discussion, please leave a comment below, and don’t forget to share the article with your fellow Magento users!

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Fayyaz Khattak

Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com

Stay Connected:

You Might Also Like...

  • Imran Zahoor

    There are some mistakes in the article so posting fixes here so it can help others:
    – Instead of /* @var MagentoQuoteModelQuoteItem $item */
    use /*@var MagentoQuoteModelQuoteItem $item */ in CheckoutCartProductAddAfterObserver.php
    – Instead of this /app/code/Cloudways/Mymodule/view/frontend/template/catalog/product/view/addtocart.phtml use
    this /app/code/Cloudways/Mymodule/view/frontend/templates/catalog/product/view/addtocart.phtml the work template
    should include (s). Otherwise you’ll get either a fatal error or the fields would never render.
    – Instead of event.xml the file name is events.xml in Assign Observers to Events section.

    • Hi Imran,

      Thank you so much! All the fixes have been done. 🙂