I added the custom option to the shopping cart like this tutorial Cloudways .

My question is how can I update this option in Cart page like "Qty"?


Quite late reply but I faced the same problem today and found this thread, so I will post my solution in hopes of helping someone else too.

I'm assuming you correctly followed the linked tutorial, so now what you need to do is to create another observer

First, add the event to your 'events.xml' :

<event name="checkout_cart_update_items_after">
    <observer name="checkoutCartUpdateItemsAfterObserver" instance="YourVendor\YourModule\Observer\CheckoutCartUpdateItemsAfterObserver" />

(of course change the names to whatever fits your liking)

Then create the respective Observer


namespace YourVendor\YourModule\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Quote\Model\Quote\Item;
use Magento\Checkout\Model\Cart\Interceptor;

class CheckoutCartUpdateItemsAfterObserver implements ObserverInterface

    public function execute(\Magento\Framework\Event\Observer $observer)
         * @var Interceptor $cart
         * @var Item[] $items
        $cart = $observer->getData('cart');
        $info = $observer->getData('info');
        $items = $cart->getQuote()->getItems();
        foreach ($items as $item) {

            if (!isset($info[$item->getId()]['your_custom_label'])) {

            $additionalOptions = [];
            $additionalOptions[] = [
                'label' => 'your_custom_label',
                'value' => $info[$item->getId()]['your_custom_label']

                'code' => 'additional_options',
                'value' => serialize($additionalOptions),
                'product_id' => $item->getProduct()->getId()

As you can see there's an $info variable there, that's what the observer receives as form data from the cart. So to make it work, in your YourVendor/YourModule/view/frontend/templates/cart/item/default.phtml

make sure to add the following to the element containing your additional option:

<input id="cart-<?php echo $_item->getId().'-'.'your_custom_label'; ?>"
      name="cart<?php echo '['.$_item->getId().'][your_custom_label]'; ?>" />

of course, use the kind of element you need, this is just an example.

Now whenever you update the cart your element will be updated too.

One last step is to save the additional option when you click "Proceed to checkout", to do that I added some javascript to my app/design/frontend/YourVendor/YourTheme/Magento_Checkout/templates/onepage/link.phtml

In case you don't have a custom theme or don't want to override this template, you can add it somewhere in the previous cart template, although it won't be that nice.

    ], function ($) {
        $(document).on('click', '#proceed-to-checkout-button-id', function (e) {
            var url = $('#form-id').attr('action'),
                data = $('#form-id').serialize();
                showLoader: true,
                url: url,
                data: data,
                type: "POST"
            }).done(function () {
                window.location.href = /checkout/;

Make sure to replace the IDs to fit yours.

I hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.