Hello Magento Friends,
How are you all? Today I will be discussing Magento 2: Add extra “Proceed to Checkout” Button on top of grid on shopping cart page. Check out our previously published blog, Magento 2: How to Get Order Details using REST API.
Introduction:
In Magento, the “Proceed to Checkout” button is displayed after the order summary on the shopping cart page. Display an extra “Proceed to Checkout” button at the top of the shopping cart grid for a quick checkout process or for the added functionality. Go ahead to know the steps to Add extra “Proceed to Checkout” Button on top of grid on shopping cart page in Magento 2.
Steps to Add extra “Proceed to Checkout” Button on top of grid on shopping cart page in Magento 2:
Step 1: First, go to the following path
app/code/VENDOR/EXTENSION/view/frontend/layout/checkout_cart_index.xml
And add the below code:
<?xml version="1.0"?> <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="VENDOR_EXTENSION::onepage/link_top.phtml" before="checkout.cart" /> </referenceContainer> </body> </page>
Step 2: Next, go to the below path
app/code/VENDOR/EXTENSION/view/frontend/templates/onepage/link_top.phtml
And add the below code
<?php
/** @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; ?>
Step 3: Finally, run the below commands
php bin/magento cache:clean php bin/magento cache:flush
That’s it!
Conclusion:
This way you can easily Add extra “Proceed to Checkout” Button on top of grid on shopping cart page in Magento 2. For any questions and difficulty, you can reach me in the comment section below. Share the solution with your friends and colleagues. Stay updated for more solutions.
Happy Coding
