{"id":2181,"date":"2021-09-28T11:12:06","date_gmt":"2021-09-28T05:42:06","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=2181"},"modified":"2025-05-14T15:30:55","modified_gmt":"2025-05-14T10:00:55","slug":"whatsapp-chat-in-woocommerce-shop-page","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/whatsapp-chat-in-woocommerce-shop-page\/","title":{"rendered":"Add WhatsApp chat in WooCommerce Shop page"},"content":{"rendered":"\n<p id=\"block-b52f02fb-87a8-42cb-9319-719f265fd3ed\">The Click to Chat plugin makes it easy to add a WhatsApp button for every product on the Shop page and also for related products on Single Product pages. This feature helps customers quickly connect with you, making the buying process smoother.<\/p>\n\n\n\n\n\n<p><\/p>\n\n\n\n<p id=\"block-ae806062-f5f8-4b41-8b97-52b04a2b4ca9\">Navigate to &#8221;<strong>Click to Chat<\/strong>&#8221; -&gt; &#8221;<strong>WooCommerce<\/strong>&#8221; &#8211;  &#8220;<strong>Add WhatsApp &#8211; SHOP PAGE <\/strong><\/p>\n\n\n\n<p id=\"block-ae806062-f5f8-4b41-8b97-52b04a2b4ca9\">and check &#8221;<strong>Add WhatsApp<\/strong>&#8221; (At products &#8211; Archive, Shop page)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"158\" height=\"180\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/woo-nav-1.webp\" alt=\"\" class=\"wp-image-6325\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\" id=\"block-3d791dc9-82e9-422e-a7b3-7d54f1e4d00d\"><img decoding=\"async\" width=\"1024\" height=\"878\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Woo_Shop_Page-1024x878.webp\" alt=\"\" class=\"wp-image-4872\" style=\"width:723px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Woo_Shop_Page-1024x878.webp 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Woo_Shop_Page-300x257.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Woo_Shop_Page-768x658.webp 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Woo_Shop_Page.webp 1064w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"block-cc4a6666-41bb-4f48-84b6-c5b13725ef6d\">Once enabled, the WhatsApp button will appear:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On every product listed on the Shop page.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On the Related products section of Single Product pages.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pre-filled Message<\/strong><\/h4>\n\n\n\n<p>The Pre-filled Message is the text that automatically appears in the WhatsApp chat window when a visitor clicks on the WhatsApp button.<\/p>\n\n\n\n<p>You can use dynamic variables to personalize the message:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>{product}<\/code> \u2014 Product name.<\/li>\n\n\n\n<li><code>{price}<\/code> \u2014 Current product price.<\/li>\n\n\n\n<li><code>{regular_price}<\/code> \u2014 Price without discount.<\/li>\n\n\n\n<li><code>{{price}}<\/code> \u2014 &nbsp;Price with currency formatting (symbol, decimal &amp; thousand separator)<\/li>\n\n\n\n<li><code>{sku}<\/code> \u2014 Stock Keeping Unit (SKU).<\/li>\n\n\n\n<li><code>{site}<\/code> \u2014 Website name.<\/li>\n\n\n\n<li><code>{url}<\/code> \u2014 Current page URL.<\/li>\n\n\n\n<li><code>{title}<\/code> \u2014 Current page title.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"1080\" style=\"aspect-ratio: 2520 \/ 1080;\" width=\"2520\" autoplay loop muted src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/06\/shop-page-prefilled.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Using these variables makes conversations more personalized and informative for your customers.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"block-326fb6e8-b450-41fa-8da1-a73ea16217b9\"><strong>Call to Action<\/strong><\/h4>\n\n\n\n<p>The <strong>Call to Action<\/strong> is the text that appears next to the WhatsApp button, encouraging users to interact.<\/p>\n\n\n\n<p>For example, a Call to Action like &#8220;WhatsApp Order&#8221; can be shown on the Shop page.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-d43f69cb-d770-41d2-be2f-2c058dfddf86\"><img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/11\/image-1024x195.png\" alt=\"This image has an empty alt attribute; its file name is image-1024x195.png\"\/><figcaption class=\"wp-element-caption\"><img decoding=\"async\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/11\/image-1-1024x419.png\" alt=\"This image has an empty alt attribute; its file name is image-1-1024x419.png\"><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"block-03db33a4-015b-419b-9926-0ae4aa96dc5b\"><strong>WhatsApp&nbsp;at&nbsp;Related products on&nbsp;a single&nbsp;product page<\/strong><\/h4>\n\n\n\n<p id=\"block-5c87983f-6da7-41e1-a969-f1a6fd182523\">By enabling this feature, the WhatsApp button will also appear under <strong>Related Products<\/strong> on each <strong>Single Product page<\/strong>.<\/p>\n\n\n\n<p id=\"block-5c87983f-6da7-41e1-a969-f1a6fd182523\">This ensures that customers can easily reach out even while browsing related items, improving their overall shopping experience.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"1080\" style=\"aspect-ratio: 2520 \/ 1080;\" width=\"2520\" autoplay loop muted src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/06\/shop-top-10.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"block-dc1a7030-3e31-491a-bf52-eb043bec8c91\"><strong>Spacing (Margin)<\/strong> <strong>Adjustments<\/strong><\/h4>\n\n\n\n<p id=\"block-dc1a7030-3e31-491a-bf52-eb043bec8c91\">You can adjust the position of the WhatsApp button by setting margin values:<\/p>\n\n\n\n<p id=\"block-02a30be8-cdc9-43b1-8413-f0a3e8ec2d12\">Top, Bottom, Left, and Right margins can be customized.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\" id=\"block-a4b5dfaf-2745-4ba8-8125-20101b38fcb1\"><img decoding=\"async\" width=\"620\" height=\"106\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/02\/Spacingshop.webp\" alt=\"\" class=\"wp-image-4123\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/02\/Spacingshop.webp 620w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/02\/Spacingshop-300x51.webp 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"block-b7dba9ff-8a28-48fb-b881-3e60c106a91d\">This helps in fine-tuning the button placement to match your store\u2019s design and ensure a clean layout.<\/p>\n\n\n\n<p>Example: Add extra spacing above the WhatsApp button if needed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\" id=\"block-4219b0d5-1a71-4e2f-b39d-6bdc1e3b4c88\"><img decoding=\"async\" width=\"1019\" height=\"97\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton.webp\" alt=\"\" class=\"wp-image-4873\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton.webp 1019w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton-300x29.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton-768x73.webp 768w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>WhatsApp in Single Product Pages<\/strong><\/h4>\n\n\n\n<p>In addition to customizing the WhatsApp widget for the shop page, we can also overwrite the content for WooCommerce single product pages. This allows us to personalize messages, call-to-action texts, and other details specific to each product. By doing so, customers can see relevant product information directly on the single product page before reaching out via WhatsApp.<\/p>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/woocommerce-single-product-pages\/\" data-type=\"link\" data-id=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/woocommerce-single-product-pages\/\">Overwriting WooCommerce Settings<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/add-whatsapp-in-woocommerce-single-product-pages\/\" data-type=\"link\" data-id=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/add-whatsapp-in-woocommerce-single-product-pages\/\">Adding WhatsApp in Single Product Pages<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Click to Chat plugin makes it easy to add a WhatsApp button for every product on the Shop page and also for related products on Single Product pages. This feature helps customers quickly connect with you, making the buying process smoother. Navigate to &#8221;Click to Chat&#8221; -&gt; &#8221;WooCommerce&#8221; &#8211; &#8220;Add WhatsApp &#8211; SHOP PAGE [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_htd2_assets":[]},"categories":[47],"tags":[],"class_list":["post-2181","post","type-post","status-publish","format-standard","hentry","category-woocommerce"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=2181"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2181\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=2181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=2181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=2181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}