{"id":3548,"date":"2024-08-28T10:57:10","date_gmt":"2024-08-28T10:57:10","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/magento-2-order-on-whatsapp\/"},"modified":"2025-05-20T13:40:27","modified_gmt":"2025-05-20T08:10:27","slug":"magento-2-order-on-whatsapp","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/magento-2-order-on-whatsapp\/","title":{"rendered":"How to Add Order on WhatsApp in Magento 2? [Free Method]"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Magento 2 order on WhatsApp helps customers easily contact you via chat to place orders. This allows you to offer more personalized shopping experiences.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, learn how to add order on WhatsApp Button on Magento 2 product pages.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Does Order on WhatsApp Work?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Order on WhatsApp is a button displayed on product pages, which starts a direct WhatsApp chat with the business, along with a pre-defined message containing product details. It redirects the customers to the WhatsApp app (if installed) or WhatsApp web.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/how-does-order-on-whatsapp-work.png\" alt=\"how does order on whatsapp work\" class=\"wp-image-41558\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The customers can send their request to purchase a particular product, and you can start creating the order from the backend based on the requirements. Similarly, you can also have a&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-to-magento-2\/\">WhatsApp chat widget<\/a>&nbsp;set up on your website to help customers easily contact you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Options for Magento 2 Order on WhatsApp<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two options to let your site visitors place orders via WhatsApp in Magento 2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use an extension \u2013<\/strong>&nbsp;A third-party extension can make this task easier for you but it can be costly, and as the extension can have limited customization features that won\u2019t be so effective in the long run.<\/li>\n\n\n\n<li><strong>Create a custom widget \u2013<\/strong>&nbsp;You might have to put some manual efforts here from your Magento admin. It is a simple and low-code method which is totally free to do.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Add Order on WhatsApp Button in Magento 2 (without Extension)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add an order on WhatsApp button to your Magento 2 store, firstly, you will add a custom block and then create a simple widget so that the button is visible on every product page.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s look at the steps in detail.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Log into your Magento 2 admin and go to&nbsp;<strong>Content &gt; Elements &gt; Blocks<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click the \u201c<strong>Add a New Block<\/strong>\u201d button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enter a title for the block, e.g. \u201cOrder on WhatsApp\u201d and set ID.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select the applicable store views where you want to display the order on WhatsApp button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/add-order-on-whatsapp-button-in-magento-2.png\" alt=\"order on whatsapp button in Magento 2\" class=\"wp-image-41558\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click \u201c<strong>Edit with Page Builder<\/strong>\u201d and add the following custom code to it:<\/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;div class=\"order-on-whatsapp\">\n&lt;button type=\"button\" id=\"btn-whatsapp\" class=\"btn-whatsapp\">Order on WhatsApp&lt;\/button>\n&lt;\/div>\n&lt;script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function () {\nvar productName = document.querySelector('h1.page-title span').innerText;\nvar productSku = document.querySelector('.product.attribute.sku .value').innerText;\nvar productPrice = document.querySelector('.price-wrapper .price').innerText;\nvar productUrl = window.location.href;\n\nvar whatsappLink = 'https:\/\/wa.me\/1234567890?text=Hello, I would like to order this product: ' + productName + ' (SKU: ' + productSku + ') for ' + productPrice + '. Here is the link: ' + productUrl;\n\ndocument.getElementById('btn-whatsapp').onclick = function () {\nwindow.open(whatsappLink, '_blank');\n};\n});\n&lt;\/script>\n&lt;style>\n.btn-whatsapp {\nborder-radius: 20px;\nbackground-color: #5dc85a;\ncolor: #ffffff;\nfont-weight: 800;\n}\n\n.btn-whatsapp:hover {\nborder-radius: 20px;\nbackground-color: #55b72e;\ncolor: #ffffff;\nfont-weight: 800;\n}\n&lt;\/style><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:&nbsp;<\/strong>Don\u2019t forget to update the link WhatsApp link in the above script to add your number. You can also modify the default message text and modify the style of the button through CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Save the block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to&nbsp;<strong>Content &gt; Elements &gt; Widgets&nbsp;<\/strong>and create a new widget to add the Order on WhatsApp button on the product pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select the&nbsp;<strong>CMS Statis Block<\/strong>&nbsp;type and choose your design theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, click&nbsp;<strong>Continue<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/new-widget-settings.png\" alt=\"new widget settings\" class=\"wp-image-41558\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Name your widget, e.g. \u201cOrder on WhatsApp\u201d, and select the store view to display it.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the Layout Updates, you can choose where to display the button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select to display on&nbsp;<strong>All Product Types&nbsp;<\/strong>and choose whether you want to add it to add or specific products. Choose the&nbsp;<strong>Product View Extra Hint&nbsp;<\/strong>container&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Scroll down, and in the&nbsp;<strong>Layout Update<\/strong>, select where you want to show the button and add that accordingly.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/layout-update.png\" alt=\"layout updates\" class=\"wp-image-41558\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Save the widget and the order on WhatsApp button will be visible on the product pages. For example, here\u2019s the final result:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/07\/order-on-whatsapp-button-visible.png\" alt=\"order on whatsapp button visible\" class=\"wp-image-41558\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Woohoo! You successfully added the WhatsApp order button in Magento 2 store without an extension or developer\u2019s help.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Magento 2 WhatsApp Contact<\/span>\r\n<p>Allow your customers to contact you instantly on WhatsApp.<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/magento-2-whatsapp-contact.html\" target=\"_blank\" class=\"btn-primary\">Add Contact Now<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/magento-2-whatsapp-contact.png\" alt=\"Magento 2 WhatsApp Contact\">\r\n<\/div>\r\n<\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus Tips for Order via WhatsApp<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can follow the step-by-step method provided above to add WhatsApp order functionality to your store. Here are bonus tips to effectively leverage WhatsApp for Magento 2:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Write an engaging pre-defined message and correctly set the product details<\/li>\n\n\n\n<li>Modify the WhatsApp button using custom styles to match your store\u2019s design and brand<\/li>\n\n\n\n<li>Enable&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/magento-2-whatsapp-order-notification-guide\/\">WhatsApp Order Notifications<\/a>&nbsp;to keep the customers informed of their purchases<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re looking for a customer support solution for your store, you can use our&nbsp;<a href=\"https:\/\/meetanshi.com\/magento-2-whatsapp-contact.html\">WhatsApp Contact<\/a>&nbsp;extension. It helps you create multiple agents to offer quick support to customers. You can create department-wise agents and streamline support operations via WhatsApp.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Magento 2 order on WhatsApp helps customers easily contact you via chat to place orders. This allows you to offer more personalized shopping experiences&#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-3548","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3548","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=3548"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3548\/revisions"}],"predecessor-version":[{"id":13722,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3548\/revisions\/13722"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}