🔥 Just Launched! Werra Premium Template for HyväSee it in Action

How To Add Button Next To Add To Cart Button In Magento 2

By Sanjay JethvaUpdated on May 22, 2025 2 min read

Magento 2 offers flexibility to customize the functions as per the business requirement, to improve the user experience, or to boost the sales.

For any of these reasons, you need to tweak the default layout or feature and that’s where my blog posts come handy, isn’t it! 

Here’s the solution to add button next to add to cart button in Magento 2. For example, you need to add a “Buy Now” button next to the add to cart button on the product page.

It will just speed up the process of conversion as well as reduce one step for the buyer in the process of purchase, hence improving the shopping experience!

Another example where you can use this solution is to add a button for customization. If you are offering products that may need customization or personalization, before placing the order, you can use the solution.

Method to add button next to add to cart button in Magento 2:

  1. Create catalog_product_view.xml file in Vendor\Module\view\frontend\layout
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.addtocart">
            <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::custombutton.phtml"/>
        </referenceBlock>
        <referenceBlock name="product.info.addtocart.additional">
            <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::custombutton.phtml"/>
        </referenceBlock>
    </body>
</page>

2. Create custombutton.phtml file in Vendor\Module\view\frontend\templates

<style>
    .custom-button
    {
        background-image: none;
        background: #1979c3;
        border: 1px solid #1979c3;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
        font-weight: 600;
        box-sizing: border-box;
        vertical-align: middle;
        float: left;
        line-height: 2.2rem;
        padding: 14px 17px;
        font-size: 1.8rem;
        margin-bottom: 15px;
        width: 49%;
        border-radius: 3px;
    }
    .action,.primary
    {
        float: left;
    }
</style>
<input class="custom-button" type="button" value="CustomButton">

3. Perform caching

That’s it.

Feel free to share the solution with fellow developers via social media.

Thanks.

Sanjay Jethva Full Image
Article bySanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe. His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.