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:
- 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.
