{"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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-653","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_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}]}}