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

October 23, 2021 The Online Helper

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

Create catalog_product_view.xml

Directory

VendorName\ModuleName\view\frontend\layout\catalog_product_view.xml

Content of catalog_product_view.xml

<?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="VendorName_ModuleName::custombutton.phtml"/>
        </referenceBlock>
        <referenceBlock name="product.info.addtocart.additional">
            <block class="Magento\Framework\View\Element\Template" template="VendorName_ModuleName::custombutton.phtml"/>
        </referenceBlock>
    </body>
</page>

Create custombutton.phtml

Directory

VendorName\ModuleName\view\frontend\templates\custombutton.phtml

Content of custombutton.phtml

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

If you are looking for Magento Developers, visit Magento Developer Agency.

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

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

Create catalog_product_view.xml

Create custombutton.phtml

Recent post