{"id":653,"date":"2019-10-28T20:49:38","date_gmt":"2019-10-28T20:49:38","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/10\/28\/add-button-next-to-add-to-cart-button-in-magento-2\/"},"modified":"2025-05-22T15:30:06","modified_gmt":"2025-05-22T10:00:06","slug":"add-button-next-to-add-to-cart-button-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-button-next-to-add-to-cart-button-in-magento-2\/","title":{"rendered":"How To Add Button Next To Add To Cart Button In Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Magento 2 offers flexibility to customize the functions as per the business requirement, to improve the user experience, or to boost the sales.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For any of these reasons, you need to tweak the default layout or feature and that\u2019s where my blog posts come handy, isn\u2019t it!&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s the solution to <strong>add button next to add to cart button in Magento 2<\/strong>. For example, you need to add a \u201cBuy Now\u201d button next to the add to cart button on the product page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to add button next to add to cart button in Magento 2:<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create&nbsp;<strong>catalog_product_view.xml<\/strong>&nbsp;file in&nbsp;<strong>Vendor\\Module\\view\\frontend\\layout<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\"?>\n&lt;page layout=\"1column\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;referenceBlock name=\"product.info.addtocart\">\n            &lt;block class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Vendor_Module::custombutton.phtml\"\/>\n        &lt;\/referenceBlock>\n        &lt;referenceBlock name=\"product.info.addtocart.additional\">\n            &lt;block class=\"Magento\\Framework\\View\\Element\\Template\" template=\"Vendor_Module::custombutton.phtml\"\/>\n        &lt;\/referenceBlock>\n    &lt;\/body>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Create&nbsp;<em><strong>custombutton.phtml<\/strong><\/em>&nbsp;file in&nbsp;<strong>Vendor\\Module\\view\\frontend\\templates<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;style>\n    .custom-button\n    {\n        background-image: none;\n        background: #1979c3;\n        border: 1px solid #1979c3;\n        color: #fff;\n        cursor: pointer;\n        display: inline-block;\n        font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;\n        font-weight: 600;\n        box-sizing: border-box;\n        vertical-align: middle;\n        float: left;\n        line-height: 2.2rem;\n        padding: 14px 17px;\n        font-size: 1.8rem;\n        margin-bottom: 15px;\n        width: 49%;\n        border-radius: 3px;\n    }\n    .action,.primary\n    {\n        float: left;\n    }\n&lt;\/style>\n&lt;input class=\"custom-button\" type=\"button\" value=\"CustomButton\"><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">3. Perform <strong>caching<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to share the solution with fellow developers via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s where my blog posts come handy, isn\u2019t it!&nbsp; Here\u2019s the solution to add button next to [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-653","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=653"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/653\/revisions"}],"predecessor-version":[{"id":15207,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/653\/revisions\/15207"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}