How To

Magento 2: Add extra “Proceed to Checkout” Button on top of grid on shopping cart page

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

Click to rate this post!
[Total: 8 Average: 4.5]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

Recent Posts

How to Delete Product Variant in a Shopify Remix App using GraphQL Mutations?

Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…

14 hours ago

6 Innovative Tools Revolutionizing E-Commerce Operations

E-commerce has transformed the way consumers shop for products and services and interact with businesses.…

3 days ago

How Upcoming Cookie Changes Will Affect Your E-commerce Website?

The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…

3 days ago

Magento 2: How to Add Header and Footer in Checkout

Hello Magento Friends, In today’s blog, we will discuss adding a header and footer to…

4 days ago

Understanding Flexbox Layout in React Native

Hello React Native Friends, Building a visually appealing and responsive mobile app is crucial in…

6 days ago

HYVÄ Themes Releases: 1.3.6 & 1.3.7 – What’s New

We have brought exciting news for Magento store owners. Hyvä Themes recently released 1.3.6 and…

6 days ago