Magento 2 : Add Extra "Proceed To Checkout" Button on Top of Grid on Cart Page

In this tutorial, Today I will explain to How to add an extra “Proceed to Checkout” Button on Top of the Grid on the Shopping Cart Page in Magento 2. By default, there is only one button available inside the order summary. Now, to make it user-friendly you can add one more extra button on top of the grid.

So, Let’s follow the below steps to add an extra button on top of the grid on the cart page.

You may also like this :

1) First of all, Let’s assume that you have created a simple module. Now, create checkout_cart_index.xml file for add extra button on cart page at app/code/RH/Helloworld/view/frontend/layout/ and paste the below code :

Copy Code


<?xml version="1.0"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Checkout\Block\Onepage\Link" name="checkout.cart.methods.onepage.top" template="RH_Helloworld::onepage/link_top.phtml" before="checkout.cart" />
        </referenceContainer>
    </body>
</page>

2) Now, Create link_top.phtml file at app/code/RH/Helloworld/view/frontend/templates/onepage/ and paste the below code to add “Proceed to Checkout” button code:

Copy Code


<?php
/**
 * Created By : Rohan Hapani
 */
/** @var $block \Magento\Checkout\Block\Onepage\Link */
?>
<?php if ($block->isPossibleOnepageCheckout()) :?>
    <button type="button"
            data-role="proceed-to-checkout"
            title="<?= $block->escapeHtmlAttr(__('Proceed to Checkout Top')) ?>"
            data-mage-init='{
                "Magento_Checkout/js/proceed-to-checkout":{
                    "checkoutUrl":"<?= $block->escapeJs($block->escapeUrl($block->getCheckoutUrl())) ?>"
                }
            }'
            class="action primary checkout<?= ($block->isDisabled()) ? ' disabled' : '' ?>"
            <?php if ($block->isDisabled()) :?>
                disabled="disabled"
            <?php endif; ?>>
        <span><?= $block->escapeHtml(__('Proceed to Checkout Top')) ?></span>
    </button>
<?php endif; ?>

After that, you can able to see the “Proceed to Checkout Top” button before the product item grid on the checkout page. You can see in the below screenshot.

Output :

That’s it !!!

I hope this blog is easy to understand about How to add an extra “Proceed to Checkout” Button on Top of the Grid on the Shopping Cart Page in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with a proper solution.

Stay Safe and Stay Connected !!

Post Views: 5,265