How To Add Button Next To Add To Cart Button In Magento 2
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
123456789101112<?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> - Create custombutton.phtml file in Vendor\Module\view\frontend\templates
123456789101112131415161718192021222324252627<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"> - Perform caching
That’s it.
Please use the Comments section below if you have any doubts about the topic.
Feel free to share the solution with fellow developers via social media.
Thanks.
Facing issues with your Magento store or want to add new features? Our Magento Development Services are here to help!
![Magento vs WooCommerce – Which Is Better for You? [2022]](https://meetanshi.com/blog/wp-content/uploads/2021/09/Magento-vs-WooCommerce-–-Which-Is-Better-for-You.png)
6 Comments
Hi, can you please provide the updated directory for magento 2.4
Hello Sineha,
The above code is already an updated one.
Thank you
I installed a custom theme and I want to add button from there. How can I add it ?
And secondly where I can find Luma theme directory where I can put all this content ?
Hello Miral,
If you are using a custom theme, enable template path hint, find the add to cart file’s path and make there changes directly for the solution.
Thanks.
I have added above in my magento project but button is not coming up in front end
Hello Kalyani,
Are you using any custom theme?
The above solution works perfectly in Luma theme..
Thank you.