How to add a button adjacent to add to cart button using uiComponent in magento 2.2.0..

https://i.stack.imgur.com/evz8C.jpg like this image,

  • Have you find the solution?
    – aravind
    Jan 28, 2020 at 10:31
  • not yet,I want to create that button with components provided by the UI library and without any overriding method. Jan 29, 2020 at 10:19

1 Answer 1


If you want to do the exact thing then you have to modify your template rather than changing the layout. Play with the code here for your chosen template.

Here's the code that will help you to produce the result that you are looking for (do look at the tag):

I hope this will work for you.

<?php /**  * Copyright © Magento, Inc. All rights reserved.  * See COPYING.txt for license details.  */

// @codingStandardsIgnoreFile

/**  @var $block \Magento\Checkout\Block\Cart\Grid */ ?> <?php $mergedCells = ($this->helper('Magento\Tax\Helper\Data')->displayCartBothPrices() ? 2 : 1); ?> <?= $block->getChildHtml('form_before') ?> <form action="<?= /* @escapeNotVerified */ $block->getUrl('checkout/cart/updatePost') ?>"
          class="form form-cart">
    <?= $block->getBlockHtml('formkey') ?>
    <div class="cart table-wrapper<?= $mergedCells == 2 ? ' detailed' : '' ?>">
        <?php if ($block->getPagerHtml()): ?>
            <div class="cart-products-toolbar cart-products-toolbar-top toolbar" data-attribute="cart-products-toolbar-top"><?= $block->getPagerHtml() ?></div>
        <?php endif ?>
        <table id="shopping-cart-table"
               class="cart items data table"
               data-mage-init='{"shoppingCart":{"emptyCartButton": "action.clear",
               "updateCartActionContainer": "#update_cart_action_container"}}'>
            <caption role="heading" aria-level="2" class="table-caption"><?= /* @escapeNotVerified */ __('Shopping Cart Items') ?></caption>
                    <th class="col item" scope="col"><span><?= /* @escapeNotVerified */ __('Item') ?></span></th>
                    <th class="col price" scope="col"><span><?= /* @escapeNotVerified */ __('Price') ?></span></th>
                    <th class="col qty" scope="col"><span><?= /* @escapeNotVerified */ __('Qty') ?></span></th>
                    <th class="col subtotal" scope="col"><span><?= /* @escapeNotVerified */ __('Subtotal') ?></span></th>
            <?php foreach ($block->getItems() as $_item): ?>
                <?= $block->getItemHtml($_item) ?>
            <?php endforeach ?>
        <?php if ($block->getPagerHtml()): ?>
            <div class="cart-products-toolbar cart-products-toolbar-bottom toolbar" data-attribute="cart-products-toolbar-bottom"><?= $block->getPagerHtml() ?></div>
        <?php endif ?>
    <div class="cart main actions">
        <?php if ($block->getContinueShoppingUrl()): ?>
            <a class="action continue"
               href="<?= $block->escapeUrl($block->getContinueShoppingUrl()) ?>"
               title="<?= $block->escapeHtml(__('Continue Shopping')) ?>">
                <span><?= /* @escapeNotVerified */ __('Continue Shopping') ?></span>
        <?php endif; ?>
        <button type="submit"
                title="<?= $block->escapeHtml(__('Clear Shopping Cart')) ?>"
                class="action clear" id="empty_cart_button">
            <span><?= /* @escapeNotVerified */ __('Clear Shopping Cart') ?></span>
        <button type="submit" /*as per your choice*/
                title="<?= $block->escapeHtml(__('Update Shopping Cart')) ?>"
                class="action update">
            <span><?= /* @escapeNotVerified */ __('Update Shopping Cart') ?></span>
        <input type="hidden" value="" id="update_cart_action_container" data-cart-item-update=""/>
    </div> </form> <?= $block->getChildHtml('checkout.cart.order.actions') ?> <?= $block->getChildHtml('shopping.cart.table.after') ?>

For the reference: https://github.com/magento/magento2/blob/9c14af7a97bcf338662de365d2613c7ca9dbf8c6/app/code/Magento/Checkout/view/frontend/templates/cart/form.phtml#L60

  • I want to create a button in addtocart block(Magento\Catalog\Block\Product\View) using uiComponent Jan 28, 2020 at 11:55
  • Yes, if you want to use drag and drop functionality then, it won't be applicable for this. Besides, you can add the button in addtocart block with the help of this code. Jan 28, 2020 at 12:38
  • I want to create button with components provided by the UI library Jan 29, 2020 at 10:16
  • Refer to this Magento 2 DevDoc, I hope you will find this helpful by tweaking the right module(directory). devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/… Jan 30, 2020 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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